HTML Tutorial: How to Use Grid Layout for Adaptive Grid Layout-HTML Tutorial-php.cn

HTML Tutorial: How to Use Grid Layout for Adaptive Grid Layout

WBOY

Release： 2023-10-27 08:11:20

Original

1011 people have browsed it

HTML Tutorial: How to Use Grid Layout for Adaptive Grid Layout

HTML tutorial: How to use Grid layout for adaptive grid layout

In front-end development, web page layout is an important link. In modern web page layout, Grid layout has become a very popular choice. It can help us build various grid layouts quickly and flexibly, and can achieve adaptive effects. This article will introduce how to use Grid layout for adaptive grid layout and provide specific code examples.

1. Introduction to Grid Layout

Grid layout is a module in CSS that provides the ability to divide web pages into rows and columns. We can implement adaptive grid layout by setting grid containers and grid items.

The grid container is the first step in using Grid layout. We need to select an element in the HTML document as a grid container, and use display: grid in CSS to specify that the container uses Grid layout. For example:

.container {
  display: grid;
}

Copy after login

Next, we can define the rows and columns of the grid container by setting the grid-template-columns and grid-template-rows properties. These two properties accept a list of values, each value representing the size of a grid cell. For example:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 200px;
}

Copy after login

The above code will divide the grid container into two columns (each column is half the width of the grid container) and two rows (100px and 200px high respectively).

Next, we can place the grid items in the grid container. Grid items are direct child elements of the grid container. You can use the grid-column and grid-row attributes to specify the position of the grid item in the grid. For example:

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

Copy after login

The above code will place the grid item in the first column position and span two columns and one row.

2. Adaptive Grid Layout

Using Grid layout can achieve adaptive grid layout, which means that grid items can automatically adjust according to the size of the web page. In actual development, we often encounter situations where we need to display different layouts on different screen sizes. Grid layout can meet this requirement very well.

When implementing adaptive grid layout, we can use the minmax function to set the size range of the grid container or grid items. This function accepts two parameters, the first parameter represents the minimum value, and the second parameter represents the maximum value. For example:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Copy after login

The above code will set the width of each column of the grid container to 200px and automatically fill the blank area of the grid container.

On mobile devices, we may want to adjust the grid layout to a single column. You can use media queries to achieve this effect. For example:

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

Copy after login

The above code will adjust the grid container to a single column when the screen width is less than 768px.

3. Specific code example

The following is a specific code example of adaptive grid layout using Grid layout:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-gap: 20px;
    }
  
    .item {
      background-color: #f2f2f2;
      padding: 20px;
      text-align: center;
    }

    @media (max-width: 768px) {
      .container {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

Copy after login

The above code will divide the grid container into Multiple columns, each column has a width of 200px, and the empty space will be automatically filled. When the screen width is less than 768px, the grid container will be adjusted to a single column.

Summary

Grid layout is a powerful grid layout tool that can help us build web page layout quickly and flexibly. Grid layout can be used to implement adaptive grid layout, allowing web pages to display different layouts on different screen sizes. Through the code examples provided in this article, I believe readers can better understand and use Grid layout for adaptive grid layout.

The above is the detailed content of HTML Tutorial: How to Use Grid Layout for Adaptive Grid Layout. For more information, please follow other related articles on the PHP Chinese website!