CSS 网格特定布局

Question

我正在寻找一种使用纯 CSS 网格来表示下一个布局的方法。

版面图片： https://i.stack.imgur.com/rDxv3.jpg

我的代码：

<div class=“grid-layout”>
  <div class=“item”>1</div>
  <div class=“item”>2</div>
  <div class=“item”>3</div>
  <div class=“item”>4</div>
</div>

Answer 1

每个 child div 都需要具有相应的 class 名称，以下 CSS 具有该名称。增加和减少间隙到需要的大小，（第一个值是行之间的间隙，第二个是列之间的间隙）

.grid-layout {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr; 
    gap: 5px 5px; 
    grid-template-areas: "item-1 item-1 item-2" "item-1 item-1 item-3" "item-1 item-1 item-4"; 
}
 
.item-1 { 
    grid-area: item-1; 
}
.item-2 { 
    grid-area: item-2; 
}
.item-3 { 
    grid-area: item-3; 
}
.item-4 { 
    grid-area: item-4; 
}

Answer 2

简单如下：

.grid-layout {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  height:500px;
}
.grid-layout > * {
  border:2px solid;
}
.grid-layout > :first-child {
  grid-area:span 3/span 3;
}

<div class="grid-layout">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

如果你想要始终保持正方形，试试这个：

.grid-layout {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.grid-layout > * {
  border:2px solid;
  display:flex;
}
.grid-layout > *:before {
  content:"";
  padding-top:100%;
}
.grid-layout > :first-child {
  grid-area:span 3/span 3;
}

<div class="grid-layout">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

CSS 网格特定布局

CSS Grid specific layout

css

grid

flexbox