Explicit Grids

The grid system implies the use of explicit and implicit grids. Let's look at these concepts in more detail.

An explicit grid is a set of elements arranged in columns and rows. Often, an explicit grid is created manually, and all the grids we created in previous lessons are explicit (for example, the tiles in grid lesson).

Let's create a table, which will be our explicit grid:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}