#How to #CSS #HTML #Responsive design

Responsive design is good for business in order to be accessible through various devices and screens.

In this post, we are going to look at one of the simplest way to make responsive layout using display: grid.

1
2
3
4
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Using the repeat function, we are going to apply a generic criteria for all columns that is to be auto-fit with either minimum of 200px or use all of the freespace available.

Check out this codepen for example implementation.

#How to #CSS #HTML #Responsive design