I made fixed width box and full width box in grid container.
It was new about me and wanted to share š
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>Grid</title> | |
<style> | |
.grid-layout { | |
background-color: purple; | |
display: grid; | |
height: 300px; | |
width: 100%; | |
/* | |
full-start 0 to 1fr -> 100% | |
main-start 0 to 1020px -> placed to 1020px of the browser | |
*/ | |
grid-template-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, 1020px) [main-end] minmax(0, 1fr) [full-end]; | |
} | |
/* Main is default column for container */ | |
.grid-layout>div { | |
grid-column: main; | |
} | |
/* Full is using for full width out of the container */ | |
.grid-layout>div.full-width { | |
grid-column: full; | |
} | |
.grid-layout>div:nth-child(1) {background-color: salmon;} | |
.grid-layout>div:nth-child(2) {background-color: sandybrown;} | |
.grid-layout>div:nth-child(3) {background-color: seagreen;} | |
.grid-layout>div:nth-child(4) {background-color: skyblue;} | |
.grid-layout>div:nth-child(5) {background-color: slateblue;} | |
.grid-layout>div:nth-child(6) {background-color: tomato;} | |
</style> | |
</head> | |
<body> | |
<div class="grid-layout"> | |
<div></div> | |
<div></div> | |
<!-- full width --> | |
<div class="full-width"></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
</body> | |
</html> |
Top comments (1)
I was toying around with that idea and ended up with kind of the same result using flex and display: content.
codepen.io/jo-o-marques/pen/xxZXjVg