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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more