Home > Article > Web Front-end > HTML tutorial: How to use Grid layout for page layout

HTML tutorial: How to use Grid layout for page layout

PHPzOriginal: 2023-10-21 11:43:491424browse

HTML Tutorial: How to use Grid layout for page layout

From the past table layout to the current Flex layout, CSS has been developing and evolving in page layout. Now, CSS Grid layout has become a powerful and flexible layout method. In this tutorial, we will learn how to use CSS Grid layout to create complex and beautiful page layouts.

CSS Grid layout is a two-dimensional grid system that allows us to divide the page into multiple rows and columns, and then place content into these rows and columns. Although Grid layout is still a relatively new feature, it is already supported by modern browsers and is widely used in practical applications.

Before we begin, we need to understand the basic terms and concepts of Grid layout. A Grid layout consists of the following main components:

Container (Container): contains the parent element of all Grid items. Enable Grid layout by setting the element's display property to grid or inline-grid.
Row: The horizontal part of the Grid layout. You can define the size and number of rows by setting the grid-template-rows of the container.
Column: The vertical part of the Grid layout. You can define the size and number of columns by setting the grid-template-columns of the container.
Grid Item: An element placed in the grid. Elements written directly in the container are automatically treated as Grid items.

Now let’s get hands-on, assuming we want to create a simple grid layout with a header, a sidebar, and a main content area.

Create HTML structure:

<!DOCTYPE html>
<html>
<head>
 <title>Grid布局教程</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="container">
     <header>头部</header>
     <aside>侧边栏</aside>
     <main>主要内容区域</main>
 </div>
</body>
</html>

Define Grid layout in CSS:

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

header {
 grid-row: 1;
 grid-column: 1 / span 2;
 background-color: #f2f2f2;
 padding: 20px;
}

aside {
 grid-row: 2;
 grid-column: 1;
 background-color: #e9e9e9;
 padding: 20px;
}

main {
 grid-row: 2;
 grid-column: 2;
 background-color: #d9d9d9;
 padding: 20px;
}

In In the above code, we first set up the Grid layout in the container and defined two rows and two columns. The header element occupies two columns of the first row, and the sidebar and main content occupy the first and second columns of the second row respectively. At the same time, we also set the spacing between grid items to 10 pixels.

Through this simple example, we can see the power of Grid layout. In addition to specifying the size and number of rows and columns, we can also specify the position of grid items through the grid-row and grid-column properties to make the layout more flexible.

In addition to the basic usage above, Grid layout also provides more powerful functions, such as adaptive size, automatic filling of space, etc. For those who want to learn and master Grid layout in depth, you can learn more about grid-template-areas, grid-auto-rows, grid-auto-columns and other attributes.

I hope that through this tutorial, you can have a preliminary understanding and mastery of how to use CSS Grid layout for page layout. By using Grid layout flexibly, you can create unique, beautiful and responsive web page layouts. Have fun with CSS layout!

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

css html auto display column flex

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 Flexbox for scalable equal-height and equal-width layoutNext article：HTML tutorial: How to use Flexbox for scalable equal-height and equal-width layout

See more

HTML tutorial: How to use Grid layout for page layout

Related articles