Css grid part 1

Css grid is a technology for making responsive Web site features.It is very simple to add grid to your site.We will make it in few steps:

1.

<div class="grid">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
<div class="card">9</div>
<div class="card">10</div>
</div>

Now let's add css to our project:

2.

body {
margin: 10px;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
} 
.card {
height: 35px;
width: 140px:
background-color: dodgerblue;
text-align: center;
} 

the display: grid; in the grid class tells the compiler that there we are using grid. grid-gap is the gap between two grid elements.
With grid-template-columns we are entering the number of columns.
With repeat(auto-fit, minmax(210px, 1fr)) we make the grid to fit whatever the size of the screen is.

New grid lesson will be soon