Setting the box in container to full width with CSS Grid

#css #layout #grid

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>