Home > Article > Web Front-end > How to create a basic grid layout page using HTML
How to create a basic grid layout page using HTML
- 王林Original
- 2023-10-21 10:37:411006browse
How to use HTML to create a basic grid layout page
Grid layout is a common and practical page layout method, which can be in the form of a grid Divide the page into multiple areas and flexibly adjust the size and position of the areas. In this article, we will introduce how to use HTML to create a basic grid layout page, and provide specific code examples for reference.
First, we need to set a container element in the HTML file, which will serve as the root element of the grid layout. It can be a div or section element. We Give it an id to identify it, such as container. Next, we use CSS to define the style of this container element to implement a grid layout.
<!DOCTYPE html>
<html>
<head>
<title>网格布局示例</title>
<style>
#container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 以相等的比例分成三列 */
grid-gap: 10px; /* 设置行列之间的间隙 */
}
</style>
</head>
<body>
<div id="container">
<!-- 这里可以添加网格中的内容 -->
</div>
</body>
</html>In the above code, we use display: grid to set the container element to a grid layout. Next, the grid-template-columns attribute specifies the number of columns and width of the grid. We use repeat(3, 1fr) to divide the grid into three columns. The width is divided equally into equal proportions.
Inside the container element, we can add content that needs to be placed in the grid, such as pictures, text, etc. You can use elements such as div as containers for each grid and add corresponding styles to them.
The following is an example that shows a code example for adding images and text to a grid layout page:
<div id="container">
<div class="grid-item">
<img src="image1.jpg" alt="图片1">
<h3>标题1</h3>
</div>
<div class="grid-item">
<img src="image2.jpg" alt="图片2">
<h3>标题2</h3>
</div>
<div class="grid-item">
<img src="image3.jpg" alt="图片3">
<h3>标题3</h3>
</div>
</div>In addition to specifying the number of columns and width, we can also use other properties to adjust the grid Grid layout style, such as grid-gap attribute is used to set the gap size between rows and columns.
The code example mentioned above is just a simple grid layout page. You can adjust the size and position of the grid according to your needs and design, add more content, and use CSS to beautify and customize it. The style of the grid.
I hope this article can help you understand how to use HTML to create a basic grid layout page, and the code examples provided can be helpful to your practice. Good luck creating beautiful pages using grid layout!
The above is the detailed content of How to create a basic grid layout page using HTML. For more information, please follow other related articles on the PHP Chinese website!