使用 Flex 或网格的页面布局

Question

我需要创建这个布局，我试过使用网格系统。但我无法实现它。下面是我的代码片段。

注意：DOM结构不能改变 Grid或者flex都可以用

.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
background-color: #2196F3;
padding: 10px;
gap:15px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.grid-item.s1 {grid-column: 1/13;}
.grid-item.s2 {grid-column: 1/5;}
.grid-item.s3 {grid-column: 5/9;}
.grid-item.s4 {grid-column: 9/13;}
.grid-item.s5,.s7 {grid-column: 1/7;}
.grid-item.s6,.s8 {grid-column: 7/13;}

<div class="grid-container">
<div class="grid-item s1">1</div>
<div class="grid-item s2">2</div>
<div class="grid-item s3">3</div>
<div class="grid-item s4">4</div>
<div class="grid-item s5">5</div>
<div class="grid-item s6">6
<div class="grid-item">7</div>
</div>
<div class="grid-item s7">8</div>
<div class="grid-item s8">9</div>
</div>

Answer 1

您的图片和代码建议使用 2 种不同的布局。您正在寻找由 9 或 7 个项目组成的网格系统吗？无论哪种方式，我都尝试过。

根据您的图片判断，我不确定网格项目 7 的高度，但您可以根据自己的喜好进行调整。我使用 grid-template-rows 和 grid-template-columns 定义了一个 12x12 的网格，然后使用 grid-area 定义了每个项目的区域。您可以轻松地为此使用 grid-generator。

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  background-color: #2196F3;
  padding: 10px;
}

.second {
  margin-top: 100px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

/* 7 grid items */

.s1 {
  grid-area: 1 / 1 / 4 / 13;
}

.s2 {
  grid-area: 4 / 1 / 8 / 5;
}

.s3 {
  grid-area: 4 / 5 / 8 / 9;
}

.s4 {
  grid-area: 4 / 9 / 8 / 13;
}

.s5 {
  grid-area: 8 / 1 / 13 / 8;
}

.s6 {
  grid-area: 8 / 8 / 11 / 13;
}

.s7 {
  grid-area: 11 / 8 / 13 / 13;
}


/* 9 grid items */
.v1 {
  grid-area: 1 / 1 / 3 / 13;
}

.v2 {
  grid-area: 3 / 1 / 6 / 5;
}

.v3 {
  grid-area: 3 / 5 / 6 / 9;
}

.v4 {
  grid-area: 3 / 9 / 6 / 13;
}

.v5 {
  grid-area: 6 / 1 / 10 / 7;
}

.v6 {
  grid-area: 6 / 7 / 8 / 13;
}

.v7 {
  grid-area: 8 / 7 / 10 / 13;
}

.v8 {
  grid-area: 10 / 1 / 13 / 7;
}

.v9 {
  grid-area: 10 / 7 / 13 / 13;
}

<!-- The supplied picture with 7 grid items -->
<div class="grid-container">
  <div class="grid-item s1">1</div>
  <div class="grid-item s2">2</div>
  <div class="grid-item s3">3</div>
  <div class="grid-item s4">4</div>
  <div class="grid-item s5">5</div>
  <div class="grid-item s6">6</div>
  <div class="grid-item s7">7</div>
</div>

<!-- Your code with 9 grid items -->
<div class="grid-container second">
  <div class="grid-item v1">1</div>
  <div class="grid-item v2">2</div>
  <div class="grid-item v3">3</div>
  <div class="grid-item v4">4</div>
  <div class="grid-item v5">5</div>
  <div class="grid-item v6">6</div>
  <div class="grid-item v7">7</div>
  <div class="grid-item v8">8</div>
  <div class="grid-item v9">9</div>
</div>

编辑：来自 Anuresh 对此答案的评论：

.grid-container {
  display: grid;
  background-color: #2196F3;
  grid-template-rows: repeat(23, 1fr);
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  font-size: 30px;
  text-align: center;
}

.s1 {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 5;
  grid-column-end: 13;
}

.s2 {
  grid-row-start: 5;
  grid-column-start: 1;
  grid-row-end: 7;
  grid-column-end: 13;
}

.s3 {
  grid-row-start: 7;
  grid-column-start: 1;
  grid-row-end: 9;
  grid-column-end: 13;
}

.s4 {
  grid-row-start: 9;
  grid-column-start: 1;
  grid-row-end: 13;
  grid-column-end: 5;
}

.s5 {
  grid-row-start: 9;
  grid-column-start: 5;
  grid-row-end: 13;
  grid-column-end: 9;
}

.s6 {
  grid-row-start: 9;
  grid-column-start: 9;
  grid-row-end: 13;
  grid-column-end: 13;
}

.s7 {
  grid-row-start: 13;
  grid-column-start: 1;
  grid-row-end: 17;
  grid-column-end: 13;
}

.s8 {
  grid-row-start: 17;
  grid-column-start: 1;
  grid-row-end: 21;
  grid-column-end: 7;
}

.s9 {
  grid-row-start: 17;
  grid-column-start: 7;
  grid-row-end: 20;
  grid-column-end: 13;
}

.s10 {
  grid-row-start: 20;
  grid-column-start: 7;
  grid-row-end: 21;
  grid-column-end: 13;
}

.s11 {
  grid-row-start: 21;
  grid-column-start: 1;
  grid-row-end: 24;
  grid-column-end: 7;
}

.s12 {
  grid-row-start: 21;
  grid-column-start: 7;
  grid-row-end: 24;
  grid-column-end: 13;
}

<div class="grid-container">
  <div class="grid-item s1">1</div>
  <div class="grid-item s2">2</div>
  <div class="grid-item s3">3</div>
  <div class="grid-item s4">4</div>
  <div class="grid-item s5">5</div>
  <div class="grid-item s6">6</div>
  <div class="grid-item s7">7</div>
  <div class="grid-item s8">8</div>
  <div class="grid-item s9">9</div>
  <div class="grid-item s10">10</div>
  <div class="grid-item s11">11</div>
  <div class="grid-item s12">12</div>
</div>

使用 Flex 或网格的页面布局

Page Layout using Flex or grid

html

css

grid

flexbox

编辑：来自 Anuresh 对此答案的评论：