Home > Article > Daily Programming > What is CSS Grid grid layout

What is CSS Grid grid layout

藏色散人Original: 2018-11-12 17:31:136549browse

This article mainly introduces you to the basic knowledge of CSS Grid layout, that is, Grid layout.

Recommended reference study: "CSS Tutorial"

For front-end beginners, the concept of CSS Grid Layout may be a bit unfamiliar. In fact, it is very easy to understand. We all know that CSS is used to lay out web page styles. We usually have to consider hack implementation issues such as web page compatibility, box floating, and positioning. CSS Grid layout, also known as CSS grid layout, is the first to be created specifically to solve this problem. module.

Simply put, CSS Grid Layout is a two-dimensional grid-based layout system that can handle columns (Columns) and rows (rows) at the same time , the goal is to change the way we interface with users based on grid design.

Below we will introduce Grid grid layout to you through a simple Grid layout example:

The simple code example of Grid layout is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid网格布局示例</title>
</head>
<style>
 .wrapper {
        display: grid;
 grid-template-rows: 100px 100px 100px;
 }
    .item1 {
        grid-column-start: 1;
 grid-column-end: 4;
 }
    .item1{

        background: #333333;

 }
</style>
<body>
<div class="wrapper">
    <div class="item1" style=" background: #745A74;">大导航</div>
    <div class="item2" style="background: #CCCC66">2</div>
    <div class="item3" style="background: #FFCFCF">3</div>
    <div class="item4" style="background: aquamarine">4</div>
    <div class="item5" style="background: chartreuse">5</div>
    <div class="item6" style="background: darkorange">6</div>
</div>
</body>
</html>

The effect is as shown below: What is CSS Grid grid layout

In the above code, we set the display:grid attribute to the specified container to start using Grid layout, that is, to define the elements Create a grid container and set the size of the columns (grid-template-columns) and rows (grid-template-rows), and then put the child elements into the container by grid-column and grid-row.

Introduction to important properties:

##grid-template-rows The properties are based on the dimensions of the grid rows and define the grid lines. The name and size of the grid track.

grid-template-columns The properties are based on the dimensions of the grid columns and define the names of the grid lines and the size of the grid tracks.

Grid-column-start Property specifies the starting position of the grid item in the grid column by contributing a row, a span, or automatic. This starting position defines the block starting edge of the grid area.

Grid-column-end Property specifies the end of the grid item in the grid column by placing a contribution line, span, or None (auto) to the grid position, thereby specifying the end edge of the block for its grid area.

This article is an introduction to the simple basic knowledge of

CSS Grid grid layout. It has certain reference value. I hope it will be helpful to friends in need!

The above is the detailed content of What is CSS Grid grid layout. For more information, please follow other related articles on the PHP Chinese website!

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：How to achieve single-sided shadow effect in cssNext article：How to achieve single-sided shadow effect in css

See more

What is CSS Grid grid layout

Related articles