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

HTML tutorial: How to use Grid layout for free layout

王林

Release： 2023-10-21 08:07:46

Original

1083 people have browsed it

HTML tutorial: How to use Grid layout for free layout

In web development, layout is an essential part. Compared with the cumbersome layout methods in the past, CSS Grid layout provides a more flexible and intuitive layout method.

This tutorial will introduce how to use Grid layout for free layout, and let everyone better understand and master it through specific code examples.

1. Introduction to Grid Layout
CSS Grid layout is a two-dimensional layout method that can control rows and columns at the same time. It implements layout by defining grid containers and grid items. A grid container is the parent element that contains grid items, and grid items are child elements within the grid container.

2. Create a grid container
First, we need to create a grid container in HTML. You can use the <div> tag as a grid container. In CSS, use <code>display: grid; to define an element as a grid container.

Code example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .grid-container {
            display: grid;
        }
    </style>
</head>
<body>
    <div class="grid-container">
    </div>
</body>
</html>

Copy after login

3. Define grid items
In the grid container, we need to define the rules of the grid items.

Code example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 100px 100px;
            grid-gap: 10px;
        }
        .grid-item {
            background-color: dodgerblue;
            color: white;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
</body>
</html>

Copy after login

In the above code, we define the size of the columns by grid-template-columns and use spaces to separate them, grid-template -rows defines the size of rows separated by spaces, and grid-gap defines the spacing between grid items.

4. Free layout
Using Grid layout, we can carry out free layout very flexibly. You can control the layout of grid items by setting different row and column sizes.

Code example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: 100px 200px;
            grid-gap: 10px;
        }
        .grid-item {
            background-color: dodgerblue;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .grid-item-1 {
            grid-column: 1 / 3;
            grid-row: 1;
        }
        .grid-item-2 {
            grid-column: 2 / 4;
            grid-row: 2;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item grid-item-1">1</div>
        <div class="grid-item grid-item-2">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
    </div>
</body>
</html>

Copy after login

In the above code, through the grid-column and grid-row properties, we can specify where the grid items are The position within the grid container. By setting the number of rows and columns at the starting and ending positions, a more flexible layout can be achieved.

Summary:
Through the above sample code, we have learned how to use Grid layout for free layout. By setting rules for grid containers and grid items, we can easily achieve various complex layout effects.

CSS Grid layout is a very powerful and intuitive layout method that will be very useful in actual web development. Through continuous practice and experimentation, I believe you will be able to use Grid layout with ease. I hope this tutorial can be helpful to you, thank you for reading!

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