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

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

Grid Layout is a powerful CSS grid system that can easily implement complex grids layout. By dividing the grid into rows and columns, we can easily control the position and size of grid items. This tutorial will introduce how to use Grid layout to layout grid items, while providing specific code examples to deepen understanding.

1. Grid container settings

First, we need to set the container containing the grid as a grid container. In HTML, this can be achieved by setting the CSS property "display: grid". For example, here is an example of a simple grid container:

<div class="grid-container">
  <!-- 网格项 -->
</div>

In CSS, we can select the grid container through a selector and set it by setting the "display" attribute to "grid" is a grid container. For example:

.grid-container {
  display: grid;
}

2. Definition of grid rows and columns

In the grid container, we can set "grid-template-rows" and "grid-template -columns" attribute to define the rows and columns of the grid. Row and column sizes can be defined using specific values ​​(such as pixels, percentages, etc.) or keywords (such as "fr" for fractional units).

For example, here is an example of a grid container with two rows and three columns:

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

This will create two rows (with heights of 100px and 200px) and Grid with three columns (width ratio 1:2:1).

3. Placement of grid items

In the grid container, we can use the "grid-row" and "grid-column" properties to specify the placement of grid items. Starting row and column, and using the "grid-row-span" and "grid-column-span" properties to specify the number of rows and columns the grid item spans.

For example, here is an example of placing a grid item in the previous grid container:

<div class="grid-container">
  <div class="grid-item" style="grid-row: 1 / 2; grid-column: 2 / 3;">
    <!-- 网格项内容 -->
  </div>
</div>

In the above example, we set the "grid" for the grid item using the "style" attribute -row" and "grid-column" properties, place it in row 1 and column 2 of the grid container.

4. Style and layout of grid items

In addition to placing grid items, we can also set styles and layouts for grid items. Grid items can be styled with colors, borders, etc. using regular CSS properties.

In addition, we can also use the "grid-column-gap" and "grid-row-gap" properties to set the row and column spacing between grid items in the grid container.

The following is a complete example that shows how to create a grid container with three rows and four columns, place multiple grid items, and set the style and layout of the grid items:

<style>
  .grid-container {
    display: grid;
    grid-template-rows: 200px 300px 100px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
  }

  .grid-item {
    background-color: #ccc;
    border: 1px solid #000;
    padding: 10px;
  }
</style>

<div class="grid-container">
  <div class="grid-item" style="grid-row: 1 / 2; grid-column: 1 / 3;">
    <!-- 网格项1的内容 -->
  </div>
  <div class="grid-item" style="grid-row: 1 / 3; grid-column: 3 / 5;">
    <!-- 网格项2的内容 -->
  </div>
  <div class="grid-item" style="grid-row: 2 / 4; grid-column: 1 / 2;">
    <!-- 网格项3的内容 -->
  </div>
  <div class="grid-item" style="grid-row: 3 / 4; grid-column: 2 / 4;">
    <!-- 网格项4的内容 -->
  </div>
</div>

The above example shows a grid container with a complex grid layout and places four grid items and sets the style and layout for each grid item.

Summary

Using Grid layout for grid item layout can make it easier for us to control the structure and appearance of the grid. By setting the rows and columns of the grid container, as well as the position and size of the grid items, we can achieve various complex layout effects. By practicing and trying different settings and properties, we can better master the skills of using Grid layout.

Hope this tutorial can help you learn and understand how to use Grid layout for grid item layout. Through practice and further research, you will be able to flexibly use Grid layout to create a variety of unique and beautiful web page layouts.

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