How to make your HTML responsive using display grid. 💯✅

#beginners #css #html #web

To make your HTML responsive using display grid, you can follow these steps:

Define the grid container: First, define the container element that will hold your grid using the display: grid property. This will enable the grid layout.

Set the grid template columns and rows: Next, set the grid template columns and rows using the grid-template-columns and grid-template-rows properties. These properties allow you to specify how many columns and rows the grid should have, as well as their size and spacing.

Place grid items: After defining the grid template columns and rows, you can place your grid items using the grid-column and grid-row properties. These properties allow you to specify which cells your items should span across.

Use media queries: Finally, to make your grid responsive, you can use media queries to adjust the grid layout based on the screen size. You can use the @media rule to set different grid properties at different breakpoints, such as changing the number of columns or their size.

Here's an example code snippet that demonstrates how to create a simple responsive grid layout:

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 20px;
}

.item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Output

In this example, the .container element is set to display: grid and has three columns with a gap of 20px between them. The .item elements are placed within the grid using the grid-column and grid-row properties.

Then, two media queries are used to adjust the grid layout at different screen sizes. When the screen size is less than or equal to 768px, the grid is set to have two columns instead of three. And when the screen size is less than or equal to 480px, the grid is set to have only one column. This allows the grid to adapt and remain responsive on different devices and screen sizes.

Hope you like it.

That’s it — thanks.

To read my other articles click here.

What is Flexbox : A Beginner's Guide to Flexbox CSS Layouts

👋Hey there, Let’s connect on:
Linkdin: Margish Patel
Twitter: @margish96patel
Email: babariyamargish97@gmail.com

Latest comments (43)

xKx • Apr 22 '23

Awesome! I am still learning Grid and this is such a helpful article to read.