DEV Community

Selen Gora
Selen Gora

Posted on

4

Setting the box in container to full width with CSS Grid

Alt Text

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>
view raw boxtofullwidth.html hosted with ā¤ by GitHub

Top comments (1)

Collapse
 
jribeiromarques profile image
JoĆ£o Marques ā€¢

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

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

šŸ‘‹ Kindness is contagious

Please leave a ā¤ļø or a friendly comment on this post if you found it helpful!

Okay