A grid is a set of intersecting horizontal and vertical lines that define the columns and rows of the grid.
CSS provides a grid-based layout system with rows and columns that allows us to design web pages more easily without using floats and positioning.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/public.js"></script>
<link rel="stylesheet" href="css/style.min.css" />
<style>
.info {
display: grid;
grid-template-columns: 3rem 1rem auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.info div {
padding: 20px 0;
background: #fff;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="info">
<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>
</div>
</body>
</html>After running, the following picture is shown:
**When an HTML element has the display attribute set to grid or inline-grid, it becomes a grid container.
** The grid-template-columns property sets the number of columns in the grid container.
** The fr unit was introduced to create flexible grid tracks. One fr unit represents one fraction of the space available in the grid container.
grid-template-columns: 1fr 1fr 1fr;**grid-column-gap property to set the grid spacing between columns
**grid-row-gap property to set the grid spacing between rows
** The grid-gap property is shorthand for the grid-row-gap and the grid-column-gap properties
**grid-template-rows property sets the height of the rows in the grid container
**grid-template is shorthand for grid-template-columns and grid-template-rows, which can be processed as follows:
grid-template: 150px / 3rem 1rem auto auto;After the above code is run, it becomes:
The height of the first row is 150px.
The grid-template attribute can specify rows/columns using named grid elements
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/public.js"></script>
<link rel="stylesheet" href="css/style.min.css" />
<style>
.info {
display: grid;
grid-template: 'item1 . . .'
'item1 . . .';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.item1 {
grid-area: item1;
}
.info div {
padding: 20px 0;
background: #fff;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="info">
<div class="item1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
</body>
</html>After running it looks like this:
