所以我最近發現CSS網格變得越來越成熟,即大多數瀏覽器現在都支持它 - 這對我當前的項目來說很好。我不需要IE 7等,以便能夠以最佳方式查看此網頁。我知道你可以做一些巧妙的與媒體查詢時,屏幕變得越來越小,如果窗口變小(使用CSS網格),讓div跳到另一行
但我想知道是否有可能單獨與CSS網格做例如?
所以我們可以說,我有一些事情是這樣的:
.container {
display: grid;
max-width: 1200px;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 25px;
}
.item-1,
item-2,
item-3 {}
<div class="container">
<div class="item-1">Some content</div>
<div class="item-2">Some content</div>
<div class="item-2">Some content</div>
</div>
所以沒有太多的造型這應該只是導致三列,同樣大的div。我的問題是,是否可以這樣說:「如果窗口最小化,並且.container
div內的某個值變小(如200px
),則將最外面的右分區(.item-3
)移動到item-1
以下,然後按照與item-1
相同的寬度路徑,而不是延伸到與item-1
和item-2
「一樣寬。
這可以用簡單的方法完成,我確實需要媒體查詢嗎?
是的,你將不得不爲此做媒體查詢。像引導程序這樣的框架內置了這些媒體查詢,因此似乎是自動的。 – Matthew