Introduction to Responsive Web Design - The Grid View

What is a Grid-View ?

The Grid-View is a layout system that enables developers to create flexible and responsive website designs. It consists of a set of rows and columns that can be used to divide the content of a webpage into a grid.

As an example:

Editor

Loading...

In this example:

• We have a container element with the class "grid-container" that contains six grid items, each with the class "grid-item".
• We use the CSS "display: grid" property to turn the container element into a grid container.
• We then use the "grid-template-columns" property to create a flexible grid with columns that are a minimum of 200 pixels wide and a maximum of one fractional unit.
• The "repeat" function is used to automatically repeat the columns based on the available space.
• We also set a gap of 10 pixels between the grid items using the "grid-gap" property, and add some padding to the container element.

Building a Responsive Grid-View

To build a responsive Grid-View, you can follow these steps:

• Define the HTML structure of your grid, using a container element and a set of child elements that will represent the grid items.

As an example:

<div class="grid-container">
     <div class="grid-item">Item 1</div>
     <div class="grid-item">Item 2</div>
     <div class="grid-item">Item 3</div>
     <div class="grid-item">Item 4</div>
     <div class="grid-item">Item 5</div>
     <div class="grid-item">Item 6</div>
</div>

• Use CSS to turn the container element into a grid container, using the "display: grid" property. You can also specify the number and size of the grid columns using the "grid-template-columns" property, as well as the gap between the grid items using the "grid-gap" property.

As an example:

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

• This will create a grid container with three columns, each taking up one fractional unit. The gap between the grid items will be 10 pixels.

---

• To make the grid responsive, you can use CSS media queries to adjust the number and size of the grid columns based on the screen size.

As an example:

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

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

In this example:

• We use two media queries to adjust the grid columns for smaller screens.
• When the screen size is less than or equal to 768 pixels, the grid will have two columns.
• When the screen size is less than or equal to 480 pixels, the grid will have a single column.

---

• You can add styles to the grid items, such as background colors, text alignment, padding, and font size, using a CSS class selector.

As an example:

.grid-item {
     background-color: #f1f1f1;
     text-align: center;
     padding: 20px;
     font-size: 30px;
}

• This will apply the specified styles to all the grid items in the grid.

By following these steps, you can build a responsive Grid-View that adapts to different screen sizes and orientations.