如何创建一个跨越 2 列和 2 行的 CSS 网格布局框?
How to create a CSS Grid Layout box that spans 2 columns and 2 rows?
我已经按照最新的 CSS 网格规范创建了一个网格布局,但我还不完全熟悉它。我正在尝试创建以下布局,而不必为每个网格子项定义网格区域。
body {
max-width: 1024px;
margin: 10px auto;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "a a b" "a a c" "d e f";
}
.grid__thing {
background-color: rebeccapurple;
}
.a {
grid-area: a;
}
.b {
grid-area: b;
}
.c {
grid-area: c;
}
.d {
grid-area: d;
}
.e {
grid-area: e;
}
.f {
grid-area: f;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="grid">
<div class="grid__thing a">
<img src="https://placehold.it/1360x880" alt="" />
</div>
<div class="grid__thing b">
<img src="https://placehold.it/660x405" alt="" />
</div>
<div class="grid__thing c">
<img src="https://placehold.it/660x405" alt="" />
</div>
<div class="grid__thing d">
<img src="https://placehold.it/660x405" alt="" />
</div>
<div class="grid__thing e">
<img src="https://placehold.it/1327x817" alt="" />
</div>
<div class="grid__thing f">
<img src="https://placehold.it/1327x817" alt="" />
</div>
</div>
理想情况下,我希望能够在网格父级中设置所有网格大小调整属性,然后仅在网格项 A 中定义属性以跨越 2 列和行。
当前正在指定每个网格区域并附加一个唯一的 class,如下所示:
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "a a b"
"a a c"
"d e f";
.a {
grid-area: a;
}
.b {
grid-area: b;
}
.c {
grid-area: c;
}
.d {
grid-area: d;
}
.e {
grid-area: e;
}
.f {
grid-area: f;
}
想做这样的事情,这样我就不必为每个网格项目创建唯一的 CSS class:
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "a a b"
"a a c"
"d e f";
}
.a {
// The only unique selector, so this is the only thing that
// should be given unique styling
}
如果您不想为每个网格项定义网格区域,请不要使用 grid-template-areas
属性,这需要您为每个网格项定义名称。
相反,只需在容器上使用 grid-template-columns
和 grid-template-rows
。
然后使用 grid-column
和 grid-row
将 2x2 尺寸应用于第一个网格项目。
grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}
grid_item:first-child {
grid-column: 1 / 3; /* span from grid column line 1 to 3 (i.e., span 2 columns) */
grid-row: 1 / 3; /* same concept, but for rows */
}
/* non-essential decorative styles */
grid_item {
background-color: aqua;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
}
<grid-container>
<grid_item>A</grid_item>
<grid_item>B</grid_item>
<grid_item>C</grid_item>
<grid_item>D</grid_item>
<grid_item>E</grid_item>
<grid_item>F</grid_item>
</grid-container>
这似乎是一个愚蠢的答案...
按照你的计划去做。删除无用的 类.
还是我遗漏了什么?
body {
max-width: 1024px;
margin: 10px auto;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "a a" "a a";
}
.grid__thing {
background-color: rebeccapurple;
}
.a {
grid-area: a;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="grid">
<div class="grid__thing a">
<img src="https://placehold.it/1360x880" alt="" />
</div>
<div class="grid__thing">
<img src="https://placehold.it/660x405" alt="" />
</div>
<div class="grid__thing">
<img src="https://placehold.it/660x405" alt="" />
</div>
<div class="grid__thing">
<img src="https://placehold.it/660x405" alt="" />
</div>
<div class="grid__thing">
<img src="https://placehold.it/1327x817" alt="" />
</div>
<div class="grid__thing">
<img src="https://placehold.it/1327x817" alt="" />
</div>
</div>
我已经按照最新的 CSS 网格规范创建了一个网格布局,但我还不完全熟悉它。我正在尝试创建以下布局,而不必为每个网格子项定义网格区域。
body {
max-width: 1024px;
margin: 10px auto;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "a a b" "a a c" "d e f";
}
.grid__thing {
background-color: rebeccapurple;
}
.a {
grid-area: a;
}
.b {
grid-area: b;
}
.c {
grid-area: c;
}
.d {
grid-area: d;
}
.e {
grid-area: e;
}
.f {
grid-area: f;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="grid">
<div class="grid__thing a">
<img src="https://placehold.it/1360x880" alt="" />
</div>
<div class="grid__thing b">
<img src="https://placehold.it/660x405" alt="" />
</div>
<div class="grid__thing c">
<img src="https://placehold.it/660x405" alt="" />
</div>
<div class="grid__thing d">
<img src="https://placehold.it/660x405" alt="" />
</div>
<div class="grid__thing e">
<img src="https://placehold.it/1327x817" alt="" />
</div>
<div class="grid__thing f">
<img src="https://placehold.it/1327x817" alt="" />
</div>
</div>
理想情况下,我希望能够在网格父级中设置所有网格大小调整属性,然后仅在网格项 A 中定义属性以跨越 2 列和行。
当前正在指定每个网格区域并附加一个唯一的 class,如下所示:
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "a a b"
"a a c"
"d e f";
.a {
grid-area: a;
}
.b {
grid-area: b;
}
.c {
grid-area: c;
}
.d {
grid-area: d;
}
.e {
grid-area: e;
}
.f {
grid-area: f;
}
想做这样的事情,这样我就不必为每个网格项目创建唯一的 CSS class:
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "a a b"
"a a c"
"d e f";
}
.a {
// The only unique selector, so this is the only thing that
// should be given unique styling
}
如果您不想为每个网格项定义网格区域,请不要使用 grid-template-areas
属性,这需要您为每个网格项定义名称。
相反,只需在容器上使用 grid-template-columns
和 grid-template-rows
。
然后使用 grid-column
和 grid-row
将 2x2 尺寸应用于第一个网格项目。
grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}
grid_item:first-child {
grid-column: 1 / 3; /* span from grid column line 1 to 3 (i.e., span 2 columns) */
grid-row: 1 / 3; /* same concept, but for rows */
}
/* non-essential decorative styles */
grid_item {
background-color: aqua;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
}
<grid-container>
<grid_item>A</grid_item>
<grid_item>B</grid_item>
<grid_item>C</grid_item>
<grid_item>D</grid_item>
<grid_item>E</grid_item>
<grid_item>F</grid_item>
</grid-container>
这似乎是一个愚蠢的答案...
按照你的计划去做。删除无用的 类.
还是我遗漏了什么?
body {
max-width: 1024px;
margin: 10px auto;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "a a" "a a";
}
.grid__thing {
background-color: rebeccapurple;
}
.a {
grid-area: a;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="grid">
<div class="grid__thing a">
<img src="https://placehold.it/1360x880" alt="" />
</div>
<div class="grid__thing">
<img src="https://placehold.it/660x405" alt="" />
</div>
<div class="grid__thing">
<img src="https://placehold.it/660x405" alt="" />
</div>
<div class="grid__thing">
<img src="https://placehold.it/660x405" alt="" />
</div>
<div class="grid__thing">
<img src="https://placehold.it/1327x817" alt="" />
</div>
<div class="grid__thing">
<img src="https://placehold.it/1327x817" alt="" />
</div>
</div>