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

šŸ‘‹ Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay