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

WBOY
Release: 2023-10-20 12:36:24
Original
1148 people have browsed it

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

  1. 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/
}

  1. 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:

1
2
3
4
5
6
Copy after login

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; }
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!