Talk about grid layout in css (graphics and text)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Talk about grid layout in css (graphics and text)

青灯夜游

Jan 13, 2021 pm 06:53 PM

cssgrid layout

Talk about grid layout in css (graphics and text)

(Learning video sharing: css video tutorial)

Grid layout can divide the web page into rows and columns of simple attributes, CSS page layout Technology allows us to pick up elements in a web page and control their position relative to the normal layout flow, surrounding elements, parent containers, or the main viewport/window.

Holy Grail Layout

Holy Grail Layout is a three-column layout with fixed width on both sides and adaptive middle:

css:

* {
        box-sizing: border-box;
    }
    html, body{
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .container{
        width:100%;
    }
    .container:after{
        display: table;
        content:".";
        clear:both;
    }
    
    .container .cl{
        float:left;
        border: 1px solid red;
        height: 200px;
    }
    
    .main{
        width:100%;
        padding 0 290px 0 320px;
        background-color: blue;
    }
    .sub{
        width: 320px;
        margin-left:-100%;
        background-color: white;
    }
    .extra{
        width: 290px;
        margin-left:-290px;
        background-color: yellow;
    }

CSS

HTML：

<body>
<div class="container">
    <div class="cl main">
    </div>
    <div class="cl sub"></div>
    <div class="cl extra"></div>
</div>
</body>

Talk about grid layout in css (graphics and text)

The principle of holy grail layout is that when the child element is in a floating state, set a negative margin, and the child element will overlap the brothers above the elements.

So if you want to divide the blue area into three areas again, I believe there are many ways. But can it be achieved through nesting? We can try it:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="window-target" content="_top">
<title>Writing to Same Doc</title>
<style type="text/css">
    * {
        box-sizing: border-box;
    }
    html, body{
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .container{
        width:100%;
    }
    .container:after{
        display: table;
        content:".";
        clear:both;
    }
    
    .container .cl{
        float:left;
        border: 1px solid red;
        height: 200px;
    }
    
    .main{
        width:100%;
        padding: 0 290px 0 320px;
        background-color: blue;
    }
    .sub{
        width: 320px;
        margin-left:-100%;
        background-color: white;
    }
    .extra{
        width: 290px;
        margin-left:-290px;
        background-color: yellow;
    }
</style>
</head>
<body>
<div class="container">
    <div class="cl main">
        <div class="container">
            <div class="cl main"></div>
            <div class="cl sub"></div>
            <div class="cl extra"></div>
        </div>
    </div>
    <div class="cl sub"></div>
    <div class="cl extra"></div>
</div>

</body>
</html>

Talk about grid layout in css (graphics and text)

The principle of grid system

Talk about grid layout in css (graphics and text)

Assumption: Flowline The width of is W, the width of column is c, the width of Gutter is g, the width of Margin is m, and the number of grid columns is N

W = c*N g*(N-1) 2m; g The width of is usually twice that of m, so:

W = (c g) * N; record c g as C, we get:

W = C * N;

Most grid systems are variations of this formula.

Bootstrap’s grid system

Let’s take a look at common grid layout designs and design implementations in bootstrap. To properly use grid layout in BootStrap, columns must be placed in rows, and rows must be placed in containers. The container class has two main functions in layout:

Provide width restrictions in different width intervals (responsive breakpoints). When the width changes, take a different width.
Provide a padding to prevent internal content from touching the browser borders.

Padding is used in Bootstrap instead of the margin mentioned above. The size is 15px, as shown in the picture below, and the pink color is the padding size.

Talk about grid layout in css (graphics and text)

Row is a container of columns. The sum of columns in each row must be 12, but we can expand it by nesting. The left and right margins of Row are -15px, which is used to offset the padding in the container, as shown in the blue part of the figure below:

Talk about grid layout in css (graphics and text)

This design of row is mainly for the convenience of nesting. , will be mentioned later.

Colomn is the protagonist of the grid system. The left and right padding of each column is 15px. The negative margin of the row above offsets the padding of the container, so setting padding for each column is to prevent the content from directly touching the border. , and there are 30px card slots (Gutter) between different columns. As shown in the yellow part of the picture below:

Talk about grid layout in css (graphics and text)

Now think about the formula mentioned above: W = C * N;

row mentioned above The negative margin design is mainly for nesting. If you want to nest a column in a column, you must first put the nested column into the row, and put the row into the column as the container, without placing a container. As shown in blue in the figure below, it is the negative margin area of the row placed in the column.

Talk about grid layout in css (graphics and text)

Now put the nested column into the row, as shown in the figure below, the upper column plays the role of container.

Talk about grid layout in css (graphics and text)

For more programming-related knowledge, please visit: Programming Learning! !

The above is the detailed content of Talk about grid layout in css (graphics and text). For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:博客园. If there is any infringement, please contact admin@php.cn delete

So Many Color LinksApr 13, 2025 am 11:36 AM

There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.

How Auto Margins Work in FlexboxApr 13, 2025 am 11:35 AM

Robin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted

Moving Rainbow UnderlinesApr 13, 2025 am 11:27 AM

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not

New Year, New Job? Let's Make a Grid-Powered Resume!Apr 13, 2025 am 11:26 AM

Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that

One Way to Break Users Out of the Habit of Reloading Too MuchApr 13, 2025 am 11:25 AM

Page reloads are a thing. Sometimes we refresh a page when we think it’s unresponsive, or believe that new content is available. Sometimes we’re just mad at

Domain-Driven Design With ReactApr 13, 2025 am 11:22 AM

There is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth

Detecting Inactive UsersApr 13, 2025 am 11:08 AM

Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo has always been great with integrations. They have integrations with specific apps, like Campaign Monitor, Mailchimp, and Typekit, but they also

See all articles