HTML tutorial: How to use Grid layout for page layout-HTML Tutorial-php.cn

HTML tutorial: How to use Grid layout for page layout

PHPz

Release： 2023-10-21 11:43:49

Original

1503 people have browsed it

HTML tutorial: How to use Grid layout for page layout

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>

Copy after login

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

Copy after login

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!