How to create a basic grid layout page using HTML-HTML Tutorial-php.cn

Table of Contents

标题3

Home

Web Front-end

HTML Tutorial

How to create a basic grid layout page using HTML

王林

Oct 21, 2023 am 10:37 AM

html grid layout create

How to create a basic grid layout page using HTML

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>

Copy after login

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="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="图片1">
        <h3 id="标题">标题1</h3>
    </div>
    <div class="grid-item">
        <img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="图片2">
        <h3 id="标题">标题2</h3>
    </div>
    <div class="grid-item">
        <img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="图片3">
        <h3 id="标题">标题3</h3>
    </div>
</div>

Copy after login

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!

Statement of this Website

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