英文:
Starting a new row in CSS Grid
问题
You can specify that the .note div should start in a new row by using the grid-row-start property. Here's how you can modify your CSS code:
.note {
grid-column: span 3;
grid-row-start: auto; /* Change this to 1 to start in a new row */
}
Setting grid-row-start to 1 will ensure that the .note div starts in a new row.
英文:
I am trying to generate a specific layout using CSS grids.
The layout I want is something like this:
Entire page is split into 12 columns. The first row cell is spanning entire first row, the second row has 2 cells spanning 4 columns each. The third row has 3 cells, spanning 3 columns each. But as per my code, the 3 cells of the third row, start in the second row itself.
My code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
border: 1px solid;
}
.wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
gap: 24px;
}
.item {
padding: 24px;
}
.banner-img {
grid-column: span 12;
}
.card {
grid-column: span 4;
}
.note {
grid-column: span 3;
}
<!-- language: lang-html -->
<div class="wrapper">
<div class="item banner-img">Hello</div>
<div class="item card">Hello</div>
<div class="item card">Hello</div>
<div class="item note">Note</div>
<div class="item note">Note</div>
<div class="item note">Note</div>
</div>
<!-- end snippet -->
How do I specify that .note div should start in a new row.
答案1
得分: 4
因为你没有指定要放在哪一行，所以第一个.note元素有空间放在第二行，所以它就放在那里。只需告诉这些元素要放在哪一行，例如使用grid-row: 3等。
* {
border: 1px solid;
}
.wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
gap: 24px;
}
.item {
padding: 24px;
}
.banner-img {
grid-column: span 12;
}
.card {
grid-row: 2;
grid-column: span 4;
}
.note {
grid-row: 3;
grid-column: span 3;
}
<div class="wrapper">
<div class="item banner-img">Hello</div>
<div class="item card">Hello</div>
<div class="item card">Hello</div>
<div class="item note">Note</div>
<div class="item note">Note</div>
<div class="item note">Note</div>
</div>
英文:
Because you aren't specifying which row to go in, there's room for the first .note element in the second row, so it goes there. So just tell these elements which row to sit in, with grid-row: 3 etc.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
* {
border: 1px solid;
}
.wrapper {
display: grid;
grid-template-columns: repeat(12,1fr);
grid-template-rows: auto;
gap: 24px;
}
.item{
padding: 24px;
}
.banner-img{
grid-column: span 12;
}
.card{
grid-row: 2;
grid-column: span 4;
}
.note{
grid-row: 3;
grid-column: span 3;
}
<!-- language: lang-html -->
<div class="wrapper">
<div class="item banner-img">Hello</div>
<div class="item card">Hello</div>
<div class="item card">Hello</div>
<div class="item note">Note</div>
<div class="item note">Note</div>
<div class="item note">Note</div>
</div>
<!-- end snippet -->
答案2
得分: 0
将grid-row: 3设置给note应该可以解决您的问题。
英文:
Setting grid-row: 3 to note should fix your issue
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
border: 1px solid;
}
.wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
gap: 24px;
}
.item {
padding: 24px;
}
.banner-img {
grid-column: span 12;
}
.card {
grid-column: span 4;
}
.note {
grid-column: span 3;
grid-row: 3;
}
<!-- language: lang-html -->
<div class="wrapper">
<div class="item banner-img">Hello</div>
<div class="item card">Hello</div>
<div class="item card">Hello</div>
<div class="item note">Note</div>
<div class="item note">Note</div>
<div class="item note">Note</div>
</div>
<!-- end snippet -->
答案3
得分: -2
Sure, here is the translated code:
<div class="wrapper">
<div class="item banner-img">Hello</div>
<div class="item card">Card</div>
<div class="item card">Card</div>
<div class="item note">Note</div>
<div class="item note">Note</div>
<div class="item note">Note</div>
</div>
* {
border: 1px solid;
}
.wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
gap: 24px;
}
.item {
padding: 24px;
}
.banner-img {
grid-column: span 12;
}
.card {
grid-column: span 4;
}
.card:nth-child(3) {
grid-column: span 8;
}
.note {
grid-column: span 3;
}
Please note that I've only translated the code portions and removed the comments.
英文:
1 way would be to add a 3rd card item with span 4.
if you can't, you can give another span to the second card item which is the 3rd item in wrapper
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
border: 1px solid;
}
.wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
gap: 24px;
}
.item {
padding: 24px;
}
.banner-img {
grid-column: span 12;
}
.card {
grid-column: span 4;
}
.card:nth-child(3) {
grid-column: span 8;
}
.note {
grid-column: span 3;
}
<!-- language: lang-html -->
<div class="wrapper">
<div class="item banner-img">Hello</div>
<div class="item card">Card</div>
<div class="item card">Card</div>
<div class="item note">Note</div>
<div class="item note">Note</div>
<div class="item note">Note</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论