Home > Article > Web Front-end > HTML Tutorial: How to Use Grid Layout for Grid Average Auto Layout

HTML Tutorial: How to Use Grid Layout for Grid Average Auto Layout

WBOYOriginal: 2023-10-18 08:52:411404browse

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

Introduction:
In front-end development, layout design is a important link. Traditional layout methods are implemented by using float, position, display and other attributes, but these methods have many drawbacks and require manual calculation and adjustment of the position and size of elements. Using CSS Grid layout can realize web page layout more concisely and flexibly. This article will introduce how to use Grid layout for grid average automatic layout, and provide specific code examples.

1. Introduction to Grid layout
Grid layout is a layout mode in CSS that controls the position and size of elements by dividing the web page into a grid of rows and columns, thereby achieving flexible web pages. layout. To use Grid layout, you need to define a container (declared through display: grid), and then add child elements within the container (controlled through properties such as grid-column and grid-row). Grid layout provides a series of properties and methods that can accurately control the position, size, spacing, etc. of elements.

2. Steps to implement grid average automatic layout
Grid average automatic layout means to evenly distribute the elements in the container according to a fixed number of columns, and automatically adjust the size of the elements to fill them up the entire container. The following are the specific steps to implement grid average automatic layout:

Create a container and declare it as Grid layout:
```
<div class="container">
  ...
</div>

<style>
  .container {
 display: grid;
  }
</style>
```
Here we use a div as the container, And add a class named "container" to it. Then set the display attribute of the element with this class name to grid in CSS to declare it as a Grid layout.
Set the number of columns and row heights of the grid:
```
<style>
  .container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-auto-rows: 200px;
  }
</style>
```
In the above code, we use the grid-template-columns property to set the number of columns of the grid . repeat(3, 1fr) means to create 3 columns, each column has a width of 1fr, that is, the remaining space is evenly distributed. The grid-auto-rows attribute is used to set the row height, here we set it to 200px. By setting these two properties, we define a grid with 3 columns and a row height of 200px.

Add child elements and set the grid position:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  ...
</div>

<style>
  .container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-auto-rows: 200px;
  }
  
  .item {
 background-color: #ccc;
  }
</style>

Add child elements inside the container and add a class name to them "item", and then use CSS Sets the background color of child elements. Here we only added 3 sub-elements, you can add more sub-elements according to actual needs.

Control the position of child elements in the grid:
```
<style>
  .container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-auto-rows: 200px;
  }
  
  .item {
 background-color: #ccc;
 grid-column-start: auto;
 grid-column-end: auto;
  }
</style>
```
In the above code, we added grid-column-start and grid-column- to the child elements end attribute and set its value to auto, indicating that the child element automatically occupies a column in the grid. This achieves an even distribution of elements.

3. Complete code example
The following is a complete example that demonstrates how to use Grid layout for grid average automatic layout:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 200px;
    }
    
    .item {
      background-color: #ccc;
      grid-column-start: auto;
      grid-column-end: auto;
    }
  </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>

4. Summary
This article introduces the method of using Grid layout for grid average automatic layout, and provides specific code examples. By using Grid layout, we can implement web page layout more conveniently and flexibly control the position and size of elements. I hope this article will be helpful to everyone’s layout design in front-end development.

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

css html Float auto display position column

Statement：

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

Previous article：HTML tutorial: How to use Grid layout for grid free layoutNext article：HTML tutorial: How to use Grid layout for grid free layout

See more

HTML Tutorial: How to Use Grid Layout for Grid Average Auto Layout

Related articles