I made fixed width box and full width box in grid container.
It was new about me and wanted to share š
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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