柵格系統，
把屏幕分成了十二份
然後是設備監聽
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>
效果
