HTML tutorial: How to use Grid layout for grid auto-adaptive layout-HTML Tutorial-php.cn

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

王林

Release： 2023-10-27 12:18:23

Original

1405 people have browsed it

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

HTML tutorial: How to use Grid layout for automatic grid adaptation layout

In modern web design, grid layout (Grid Layout) has become a popular Layout method. It allows the elements of the web page to automatically adapt to the layout in the grid system, so that the page can show good layout effects on different screen sizes. In this article, I will introduce how to use Grid layout to implement automatic grid adaptation layout, and provide some specific code examples.

Grid layout is a powerful layout system in CSS that allows us to create a grid container and arrange the elements in it. When using Grid layout, you first need to create a grid container, that is, set the display attribute of the element to grid or inline-grid. Next, we can use various properties and values to define the grid's rows, columns, and the position and size of elements.

The following is a simple example:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
}

.grid-item {
  background-color: #b21818;
  color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Grid布局栅格自动适应布局示例</h1>

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

</body>
</html>

Copy after login

In this code, we first create a container named grid-container and set its display attribute to grid, so that the Containers are converted to grid containers. Next, we use the grid-template-columns property to define the number and width of the grid container's columns. In this example, we have defined three auto-width columns with a 10px gap between each column. We also set the padding property to add some white space to the grid container.

In the grid container, we added 9 sub-elements, namely grid-item. Each element has a background color, center-aligned text, and a font size of 30px. These elements will automatically adapt to the layout in the grid, filling the entire grid container.

When we use Grid layout to realize automatic grid adaptation layout, we can flexibly adjust the width of each column so that the page can adapt to different screen sizes. You can adjust the properties of the grid container and grid items according to actual needs to achieve the layout effect you want.

In addition to the grid-template-columns attribute, there are many other Grid layout attributes that can be used, such as grid-template-rows, grid-gap, grid-row-start, etc. By using these properties flexibly, we can create a variety of grid layouts, not just the examples above.

To summarize, using Grid layout for automatic grid adaptation layout is a powerful and flexible web page layout method. By properly setting the properties of the grid container and sub-items, we can easily achieve a web page layout with good typography effects. I hope this article can help you better understand and apply Grid layout.

The above is the detailed content of HTML tutorial: How to use Grid layout for grid auto-adaptive layout. For more information, please follow other related articles on the PHP Chinese website!