無需媒體查詢的自適應CSS網格

Question

 body { padding: 20px; font-family: Helvetica; background-color: #20262e; } ul { display: grid; grid-template-columns: repeat(3, minmax(300px, 1fr)); grid-template-rows: max-content 1fr; grid-gap: 10px; list-style: none; } li { background-color: #fff; border-radius: 3px; padding: 20px; font-size: 14px; } .a { grid-column: 1/2; grid-row: 1/3; } .b { grid-column: 2/3; grid-row: 1/2; } .c { grid-column: 2/3; grid-row: 2/3; } .d { grid-column: 3/4; grid-row: 1/3; } 

 <ul> <li class=a>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br></li> <li class=b>B</li> <li class=c>C</li> <li class=d>D</li> </ul> 

我希望網格可以折疊成一列，列表項達到300px時寬度為100％。

可以不必進行媒體查詢，例如：

@media only screen and (max-width: 900px) {
    ul {
        display: block;
    }
}

Answer 1

我不得不更改您的HTML，您可能不喜歡它：

 body { padding: 20px; font-family: Helvetica; background-color: #20262e; } ul { display: grid; grid-template-columns: repeat( auto-fit, minmax( 300px, auto ) ); grid-template-rows: max-content 1fr; grid-gap: 10px; list-style: none; } li { background-color: #fff; border-radius: 3px; padding: 20px; font-size: 14px; } ul ul{ height:100%; display:grid; grid-template-columns:1fr; grid-template-rows:1fr 4fr; } .b{background:transparent;padding:0;} .b ul{padding:0;margin:0; } .b li{border:1px solid;} 

 <ul> <li class=a>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br></li> <li class="b"> <ul> <li class="c">B</li> <li class="c">C</li> </ul> </li> <li class=d>D</li> </ul> 

這是重要的部分： grid-template-columns: repeat( auto-fit, minmax( 300px, auto ) ); 我從這篇文章中得到了這個主意： CSS網格中的列自動調整大小： auto-fill與auto-fit

Answer 2

如評論中所述，如果您希望避免媒體查詢， flexbox可能是一個更好的選擇。 這里的關鍵是聲明flex-wrap: wrap; 在父母身上。 由於ul除了li不能再有其他任何子代，因此您將不得不重新html以容納一列。

 body { padding: 20px; font-family: Helvetica; background-color: #20262e; } ul { display: flex; flex-wrap: wrap; list-style: none; } li { display: flex; background-color: #fff; border-radius: 3px; margin: 10px; padding: 20px; width: 270px; font-size: 14px; } .a { grid-column: 1/2; grid-row: 1/3; } .b { grid-column: 2/3; grid-row: 1/2; } .c { grid-column: 2/3; grid-row: 2/3; } .d { grid-column: 3/4; grid-row: 1/3; } 

 <ul> <li class=a>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br></li> <li class=b>B</li> <li class=c>C</li> <li class=d>D</li> </ul>