Two-column layout from one container — utopia or not?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
25 views
Hello!

Here is a utopia:

1. 2. 3. 4. 

5ae1e4d11f2e5348250563.png5ae1e4d67b156711309978.png
For Flex proved to be unaffordable (within my knowledge). Grid managed to dazzle like, but can't do without js.
by | 25 views

1 Answer

0 like 0 dislike
For grid is quite real:
.grid {
display: grid;
height: 100vh;
grid-template-columns: 1fr 3rf;
grid-template-rows: auto auto 1fr;
grid-gap: 15px;
}
.grid__item {
background-color: #fcc;
}
.grid__item:nth-child(1) {
grid-area: 1 / 1 / 4 / 2;
}
.grid__item:nth-child(2),
.grid__item:nth-child(3),
.grid__item:nth-child(4) {
grid-column: 2;
}
\rhttps://codepen.io/galkinhtml/pen/ZoBpKW
by

Related questions

0 like 0 dislike
3 answers
0 like 0 dislike
2 answers
asked May 21, 2019 by ivansimonov1984
0 like 0 dislike
1 answer
asked Apr 28, 2019 by webe
110,608 questions
257,186 answers
0 comments
35,405 users