我正在嘗試創建這樣的網格布局
我能夠創建這個布局。我在第一列中掙扎，我不希望它占據行的全高。我想實作第一個影像中的網格布局。灰色單元格只是我稍后將添加移動內容的 div。
我的 CSS 代碼：
.cards_grid {
grid-auto-columns: 1fr;
grid-column-gap: 1.5rem;
grid-row-gap: 1.5rem;
-ms-grid-rows: auto 1.5rem auto;
grid-template-areas:
"first first first first second second second second second third third third"
"fourth fourth fourth fourth fifth fifth fifth fifth sixth sixth sixth sixth";
-ms-grid-columns: minmax(auto, 1fr);
grid-template-columns: minmax(auto, 1fr);
}
我已經嘗試過了，grid-layout-rows: masonry但大多數瀏覽器都不支持它。
uj5u.com熱心網友回復：
你可以試試這個，我知道有比這更好的，你可以自己試試
<!DOCTYPE html>
<html>
<head>
<style>
body{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 490px;
background: #e5e5e5;
display: flex;
flex-wrap: wrap;
}
.box-cl-1{
width: 30%;
display: flex;
flex-direction: column;
}
.box-1{
margin: 10px;
flex: 30%;
height: 130px;
background: #8f8f8f;
}
.box-2{
margin: 10px;
flex: 50%;
height: 200px;
background: #8f8f8f;
}
.box-cl-2{
width: 70%;
display: flex;
flex-direction: column;
}
.box-3{
margin: 10px;
flex: 70%;
height: 250px;
background: #8f8f8f;
}
.box-4{
margin: 10px;
flex: 30%;
height: 250px;
background: #8f8f8f;
}
.box-5{
margin: 10px;
flex: 50%;
height: 200px;
background: #8f8f8f;
}
.box-6{
margin: 10px;
flex: 50%;
height: 200px;
background: #8f8f8f;
}
</style>
</head>
<body>
<div class="container">
<div class="box-cl-1">
<div class="box-1"></div>
<div class="box-2"></div>
</div>
<div class="box-cl-2">
<div style="display: flex;">
<div class="box-3"></div>
<div class="box-4"></div>
</div>
<div style="display: flex;">
<div class="box-5"></div>
<div class="box-6"></div>
</div>
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
您可以使用簡單的磚石風格。在 GitHub 上使用它：https : //masonry.desandro.com/
uj5u.com熱心網友回復：
堅持使用明確定義網格區域的方法，您可以使用與水平放置相同的技術 - 在這種情況下，您已經定義了 12 列 - 在垂直放置上。
看起來網格有 5 行，第一個元素向下延伸 2 行，其下方的元素（第四個元素）向下延伸 3 行，依此類推。
此代碼段洗掉了一些不需要的 CSS，并將整個網格設定為 4:3 的縱橫比。顯然，這可能會改變您的特定要求。
.cards_grid {
width: 100vmin;
height: 75vmin;
display: grid;
grid-column-gap: 1.5rem;
grid-row-gap: 1.5rem;
grid-template-areas: "first first first first second second second second second third third third" "first first first first second second second second second third third third" "fourth fourth fourth fourth second second second second second third third third" "fourth fourth fourth fourth fifth fifth fifth fifth sixth sixth sixth sixth" "fourth fourth fourth fourth fifth fifth fifth fifth sixth sixth sixth sixth";
}
.cards_grid>div {
background: gray;
}
.cards_grid>div:nth-child(1) {
grid-area: first;
}
.cards_grid>div:nth-child(2) {
grid-area: second;
}
.cards_grid>div:nth-child(3) {
grid-area: third;
}
.cards_grid>div:nth-child(4) {
grid-area: fourth;
}
.cards_grid>div:nth-child(5) {
grid-area: fifth;
}
.cards_grid>div:nth-child(6) {
grid-area: sixth;
}<div class="cards_grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>uj5u.com熱心網友回復：
您使用 Grid 創建包裝器 (.grid-box)，然后定義模板：grid-template-columns 和 grid-template-rows。
然后您可以使用 grid-*-start 定位您的單個框。這是您在網格中的模板。
.grid-box {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 25% 25% 25% ;
grid-gap: 10px;
padding: 10px;
}
.box-1 {
background: red;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.box-2 {
background: green;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.box-3 {
background: gray;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.box-4 {
background: yellow;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 4;
}
.box-5 {
background: orange;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}
.box-6 {
background: lightblue;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}<div class="grid-box">
<div class="box-1">1</div>
<div class="box-2">2</div>
<div class="box-3">3</div>
<div class="box-4">4</div>
<div class="box-5">5</div>
<div class="box-6">6</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344727.html