asked 4 months ago Votes
0 Answers
16 Views
I was wondering how does the Css grid layouts. I thought I was getting close to understand it until I tried this below.
I thought it would make the item 5 go behind the 3 since it has no position defined in the grid, but instead it went after the item 3, what is the behaviour behind it?
https://codepen.io/anon/pen/GOPvXO\
html, body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px 50px;
}
.wrapper div{
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: white;
}
.wrapper div:nth-child(1){
background-color: blue;
grid-column-start: 1;
grid-column-end: 3;
}
.wrapper div:nth-child(2){
background-color: red;
}
.wrapper div:nth-child(3){
background-color: green;
grid-column-start: 2;
grid-column-end: 3;
}
.wrapper div:nth-child(4){
background-color: lightblue;
grid-column-start: 2;
grid-row-end: 4;
}
.wrapper div:nth-child(5){
background-color: pink;
}
.wrapper div:nth-child(6){
background-color: lightgreen;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>