I want to create a grid table like this (two items have a height 50%)
My HTML
and Sass
code enow is looking like:
<div class="grid">
<div class="grid__list">
<div class="grid__item">1</div>
<div class="grid__item">2</div>
<div class="grid__item">3</div>
<div class="grid__item">4</div>
<div class="grid__item">5</div>
<div class="grid__item">6</div>
</div>
</div>
.grid
&__list
display: grid
grid-template-columns: repeat(3, 1fr)
grid-template-rows: repeat(3, 1fr)
grid-column-gap: 20px
grid-row-gap: 20px
min-height: 1000px
&__item
border-radius: 5px
background: blue
&:nth-child(1)
grid-area: 1 / 1 / 4 / 2
&:nth-child(2)
grid-area: 1 / 3 / 2 / 4
&:nth-child(3)
grid-area: 2 / 3 / 3 / 4
&:nth-child(4)
grid-area: 3 / 3 / 4 / 4
&:nth-child(5)
grid-area: 1 / 2 / 3 / 3
&:nth-child(6)
grid-area: 3 / 2 / 4 / 3
You need a six row grid...not three.
* { margin: 0; padding: 0; box-sizing: border-box; } ::before, ::after { box-sizing: inherit; } .grid__list { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, 1fr); grid-column-gap: 20px; grid-row-gap: 20px; height: 100vh; grid-auto-flow: column; padding: .5em; } .grid__item { background: blue; display: flex; justify-content: center; align-items: center; font-size: 2em; color: white; grid-row: span 2; } .grid__item:nth-child(1) { grid-row: span 6 } .grid__item:nth-child(2), .grid__item:nth-child(3) { grid-row: span 3 }
<div class="grid__list"> <div class="grid__item">1</div> <div class="grid__item">2</div> <div class="grid__item">3</div> <div class="grid__item">4</div> <div class="grid__item">5</div> <div class="grid__item">6</div> </div>
try this. working for me.
.grid__item {
border-radius: 5px;
background: blue;
&:nth-child(1) {
grid-column: 1;
grid-row: 1/4;
}
&:nth-child(2) {
grid-column: 2;
grid-row: 1/3;
}
&:nth-child(3) {
grid-column: 2;
grid-row: 3;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.