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

HTML tutorial: How to use Grid layout for grid adaptive layout, specific code examples are required

Introduction:
In modern Web design, page layout Adaptability is an important consideration. Although traditional layout methods such as floating and positioning can achieve a certain degree of adaptability, they often require a lot of code and adjustments. CSS Grid layout provides a simple and powerful way to implement grid adaptive layout. This tutorial will introduce in detail how to use CSS Grid layout to implement grid adaptive layout and provide specific code examples.

1. Grid layout basics

1. Declare the Grid container:
   First, we need to create a Grid container in CSS. This can be achieved by setting the display attribute of the container to grid:

.grid-container {
display: grid;
}

2. Define the grid:
   By using the grid-template-rows and grid-template-columns properties, we can define the rows and columns of the grid.

.grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr); / Three rows, each row is of equal height/
grid-template-columns: repeat(3, 1fr); / Three columns, each column has equal width/
}

3. Define the cell position :
   Using the grid-row and grid-column properties, we can specify the position of an element in the grid.

.grid-item {
grid-row: 1 / span 2; / Starting from the first row, spanning two rows/
grid-column: 2 / span 1; / Start from the second column and span one column/
}

2. Grid adaptive layout example
Below we will use a specific example To demonstrate how to use Grid layout for grid adaptive layout.

HTML part:

<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>

CSS part:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  /* 自动适应列数，每列最小宽度200px，最大为1fr */
  grid-gap: 10px;  /* 单元格间隔为10px */
}

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

The above code will create a container with grid adaptive layout, containing 6 cells of the same width. . The width of these cells will automatically adjust according to the screen width, with a minimum width of 200px per column and a maximum width of 1fr of the remaining space. The space between each cell is 10px.

Conclusion:
Through CSS Grid layout, we can easily implement grid adaptive layout without a lot of code and adjustments. Using the grid-template-columns and grid-template-rows properties, we can flexibly define the rows and columns of the grid. Using the grid-row and grid-column properties we can control the position of elements in the grid. Using attributes such as repeat, auto-fit, and minmax, we can implement adaptive layout of the grid. I hope this tutorial will help you understand and apply CSS Grid layout.

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