2017-08-06 44 views
-2

所以我最近發現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-1item-2「一樣寬。

這可以用簡單的方法完成,我確實需要媒體查詢嗎?

+2

是的,你將不得不爲此做媒體查詢。像引導程序這樣的框架內置了這些媒體查詢,因此似乎是自動的。 – Matthew

回答

1

「如果當窗口被最小化,並且.container DIV中一個div變得更小一些的值(如200像素),然後移動下面item-1最外右DIV(.item-3),並按照相同的寬度的路徑作爲item-1而不是延伸到寬是既item-1item-2

瀏覽器應該如何知道你要重新安排佈局時,一個項目變得小於200像素寬?

是怎樣的b當媒體功能被觸發時,rowser應該知道該怎麼做?

所以,是的,你需要媒體查詢。這正是他們的目的。