栅格系统,
把屏幕分成了十二份
然后是设备监听
bootstrap源码
下边这个div在屏幕宽度>767px的时候占3份,<768px占6份
也就是在电脑宽屏上横屏可以放四个(12/3),手机上横屏可以放两个(12/6)
<div class="col-xs-6 col-sm-3"
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
可以用grid布局不用设备监听做一个栅格系统
grid-template-columns:repeat(auto-fill, minmax(400px, 1fr));
完整例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
span {
font-size: 2em;
}
#container {
display: grid;
grid-template-columns:repeat(auto-fill, minmax(400px, 1fr));
}
.item {
font-size: 2em;
height: 200px;
text-align: center;
border: 1px solid #e5e4e9;
}
.item-1 {
background-color: #ef342a;
}
.item-2 {
background-color: #f68f26;
}
.item-3 {
background-color: #4ba946;
}
.item-4 {
background-color: #0376c2;
}
.item-5 {
background-color: #c077af;
}
.item-6 {
background-color: #f8d29d;
}
.item-7 {
background-color: #b5a87f;
}
.item-8 {
background-color: #d0e4a9;
}
.item-9 {
background-color: #4dc7ec;
}
</style>
</head>
<body>
<div id="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
</div>
</body>
</html>
效果