Summary of common Web development layouts

Summary of a.

Both front-end and client-side development is inseparable from the presentation of the page, and the page is composed of layout and various components. The layout is the framework of the building, and the components are the bricks of the building. The components are arranged according to the requirements of the layout to form the interface that the user sees. For example, Android developers often use layout methods: LinearLayout, RelativeLayout, AbsoluteLayout, GridLayout, and so on. IOS developers often use layout methods: Hand-written Frame, AutoLayout, XIB, storyboard, etc. Here we mainly introduce the layout of the front end. Although most of the current site construction is built through a mature framework, but as the foundation of front-end development, learning about the layout is still very necessary.

Page Layout: refers to the Layout and design of the text, graphics or tables on the page

The purpose of studying layout is to make our pages as close as possible to the design that the UI design gave us, to fit various screen sizes, so that it can display our view well on various screen sizes. Let’s take a look at some of the common layout types we use in Web development:

Ii. Layout types

1. Common flow layout

This is the default layout of the page, each element has a default space, each element appears in the upper left corner of the parent element, the block elements in the page appear from top to bottom, each block element has its own row, the page row elements are arranged from left to right. Each element has a default display value, depending on the element type. The default value for most elements is block or inline. A block element is often called a block-level element. An inline element is usually called an inline element. For example, div is a standard block-level element. When the page is rendered, the block-level element will be displayed on another line, and the in-line element will be displayed on the current line. Here’s a simple example:

< span style> * {padding: 0; margin: 0; box-sizing: border-box; } body { background-color: white; } div { border: 1px solid red; } span { border: 1px solid green; } body :nth-child(4) { display: inline-block; background-color:salmon; <span style> </head> <body> <div> <span style> </span style> </div style> </head> <body> <div style> </div style> </div style> </div> </body>Copy the code

You can seedivElements are on a single row, and inline elementsspanNo line breaks. Other commonly used block-level elements includep,H1 - h6,formAnd what’s new in Html5:header 、 footer 、 sectionAnd so on. Common inline elementsa,input,img,labelAnd so on.
displayThe value of is except forblock 跟inlineYou can also use itinline-blockIf the display property of a block element is inline-block, then it is not a newline element, such as our second div element. If an inline element display is inline-block, it has some of the characteristics of a block element, such as the ability to change its size.
Another common onedisplayThe value isnone. Defaults for some special elementsdisplayThe value is this, for examplescript 。 display:noneCommonly used by JavaScript to hide or display elements without removing them. It andvisibilityProperties are different. thedisplaySet tononeThe element does not occupy the space it should be displayed, but is set tovisibility: hidden;It takes up space.
displayThere are some other values that you can look athere

2. Floating layout

Property: float Value: None: Default, no float Left: float to the left of the parent, or next to an existing floating element Right: float to the right of the parent, or next to an existing floating element Let’s see how it works, the normal layout:

 <! DOCTYPEhtml>
<html>
    <head>
        <title>The normal layout</title>
        <meta charset="UTF-8">
        <style>
            * {
                margin:  0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                background-color: wheat;
            }
            .left {
                width: 100px;
                height: 200px;
                background-color: rosybrown;
            }
            .right {
                width: 100px;
                height: 200px;
                background-color: saddlebrown;
            }
            .last {
                width: 100px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="left">On the left side of the</div>
            <div class="right">On the right side</div>
        </div>
        <div class="last">behind</div>
    </body>
</html>
Copy the code

Now let’s add the float property for.left and.right respectively, and add the following code

.left {
    float: left;
    width: 100px;
    height: 200px;
    background-color: rosybrown;
   }
.right {
    float: right;
    width: 100px;
    height: 200px;
    background-color: saddlebrown;
}
Copy the code

Looking at the page effect, the left and right modules work as expected, but the container element has no background. If we check the element, we can see that the height of the container has changed to 0, and the last element only shows the text, and the background is gone. That brings us to the nature of float:

Features:

Elements are excluded from the document flow and no longer take up space on the page. Other unfloated elements will be moved forward.
Floating elements are docked to the left or right of the parent element, or to the edge of other floating elements.
Text within the line is arranged in a circular way, not under floating elements, but will be cleverly avoided floating elements.

(1) You can set the height of the parent element directly, for example, add height:300px; (2) Set the overflow value hidden or auto for the parent element. (3) Use the clear attribute, and the value of both can solve the impact of left and right floating. (4) Add a CSS pseudo-element to the contariner container and set its clear property to both.

<div class="container">
    <div class="left">On the left side of the</div>
    <div class="right">On the right side</div>
    <div style="clear:both"></div>
</div>
Copy the code

Or is it

.container::after {
  content: "";
  display: table;
  clear: both;
}
Copy the code

Let’s see how it works. It works as we hoped

In fact, the main purpose of float is to make block-level elements appear on a single line. And you can arrange text around floating elements.

3. Positioning and layout

Properties:position, default value:static, can be divided into:

Position :relative; Absolute positioning: position:absolute; Fixed positioning :position:fixed; An element is said to be positioned as long as its position attribute is not static. It is important to note that when these positions are introduced later, a positioned element has an effect on its own position.

Offset attribute:top,left,right,bottom, the value is a value in the unit of px. The value can be positive or negative, corresponding to the offset in different directions

“Top” : the value is positive and moves down, and the value is negative and moves up. “bottom” : The value is positive and moves up, and the value is negative and moves down. Left: The value is positive and moves right, and negative values move left. Right: The value is positive and moves left, and negative values move right

How to remember: You can refer to the legend below. When the value is positive, it moves to the inside of the element, while when the value is negative, it moves away from the element.

(1) Relative positioning`relative`

The element is shifted relative to its original position. Using the normal document flow layout as shown above, we now want the right block to be on the same line as the left block, and to be displayed to the right of the left block, achieving the image below

So we can set the layout of dot right to look like this

.right {
    position: relative;
    top: -100px; 
    left: 50px; 
    width: 50px;
    height: 100px;
    background-color: saddlebrown;
}
Copy the code

(2) Absolute positioning`absolute`

An element is initialized and shifted relative to its nearest (one of three) located ancestor, which is the parent element of the element. If there are no located ancestor elements, the location is initialized and offset relative to the body. Absolute positioning elements become block-level elements.

Usage: position: absolute; Now we want the right block to be superimposed on top of the left block, achieving the image below;

So we can set the layout of dot right to look like this

.right {
    position: absolute;
    top: 50px;
    left: 0;
    width: 50px;
    height: 100px;
    background-color: saddlebrown;
}
Copy the code

You can see that when the postion attribute of a child element is set toabsoluteAfter the height of the original parent element has changed, indicating.rightOut of the flow of documents, no longer occupying page space. Note that theretop: 50px;Is changed relative to body, which is initialized at the upper-left corner of the document stream because of its parent elementcontainerIs not a located element.

(3) Fixed positioning`fixed`

Position: Fixed elements are positioned relative to the window, which means that even if the page scrolls, it stays in the same position. As with relative, the top, right, bottom, and left properties are available.

Using the same example as above, let’s fix last in the bottom right corner of the page and set the CSS for last as follows

.last {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 70px;
    height: 75px;
    background-color: red;
}
Copy the code

Pay attention toposition:fixedThe elements of the.

(4) Positioning supplement

Once the element is set to a positioned element (position is not static), the element may be stacked. The stack attribute is z-index, and the value is the number without units. The larger the number, the higher the number

Let’s use the absolute positioning example above to illustrate, setrightIs absolute positioning,rightinleftSo if I want to makeleftIn the,rightNext, achieve the following effect

Set the CSS code for left

.left {
    position: relative;
    z-index: 10;
    width: 50px;
    height: 100px;
    background-color: rosybrown;
}
Copy the code

Note: Only positioned elements can use z-index if not setposition: relative;There is no effect. The stack effect cannot be adjusted between the parent and child elements. The child elements press on top of the parent.

4. The flex layout

Flex layout, also known as elastic layout, is a layout method designed for one-dimensional layout. One-dimensional means you want the content to be laid out in rows or columns. You can use display:flex to change elements to an elastic layout. Let’s go straight to the example: implement 7 items horizontally

<! DOCTYPEhtml>
<html>
    <head>
        <title>The flex 2 layout</title>
        <meta charset="UTF-8">
        <style>
            * {
                margin:  0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: flex-end;
                background-color: wheat;
                flex-wrap: wrap;
            }
           .item {
               width: 100px;
               height: 100px;
               border: 1px solid royalblue;
               text-align: center;
               line-height: 100px;
               margin: 10px 10px;
           }
           .item6 {
               flex: 1;
           }
           .item7 {
               flex: 2;
           }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="item0 item">item0</div>
            <div class="item1 item">item1</div>
            <div class="item2 item">item2</div>
            <div class="item3 item">item3</div>
            <div class="item4 item">item4</div>
            <div class="item5 item">item5</div>
            <div class="item6 item">item6</div>
            <div class="item7 item">item7</div>
        </div>
    </body>
</html>
Copy the code

The above code basically covers the flex properties that we often use

display:flexSet:containerThe container layout is elastic
flex-direction: Determines the direction of the main axis. Items are arranged horizontally or vertically

Values: row | row – reverse | column | column – reverse; Row (default) : the main axis is horizontal and the starting point is on the left. Row-reverse: The main axis is horizontal and the starting point is on the right. Column: the main axis is vertical and the starting point is on the upper edge. Column-reverse: the main axis is vertical and the starting point is lower.

justify-content: Defines how items are aligned on the main axis.

Values: flex – start | flex – end | center | space – between | space – around; Flex-start (default) : Align the items left Flex-end: Align the items right Center: center space-between: Align the items at both ends with the same spacing between them. Space-around: Equally spaced on both sides of each project. As a result, the space between items is twice as large as the space between items and borders.

align-items: Defines how items are aligned on cross axes.

Values: align – items: flex – start | flex – end | center; Flex-start: Start alignment of cross axes. Flex-end: End alignment of the cross axis. Center: Aligns the midpoint of the intersecting axis.

flex-wrap: Cannot fit on an axis, decide whether to wrap it

Values: nowrap (not a newline) | wrap (wrap)

Flex property: The Flex property isflex-grow.flex-shrink 和 flex-basisThe default value is 0, 1 auto.

The flex-grow: property defines the magnification ratio of the project, which defaults to 0, meaning that it will not be enlarged if there is room left. The larger the value, the larger the remaining space. Flex-shrink: The attribute defines the shrink scale of the project, which defaults to 1, meaning that the project will shrink if there is not enough space. The flex-basis: attribute specifies the initial size of the Flex element in the main axis direction

Set the flex of Item6 and Item7 to 1 and 2, indicating that the remaining space of the current axis is 1/3 for Item6 and 2/3 for Item7.

We visitcaniuseIf you look at browser support for it, you can see that most browsers currently support this property.More information about Flex properties can be found here:Flex layout

5. The grid layout

When we talk about layout, we think about itflexLayout, some even think since there isflexThe layout seems unnecessary to understandGridLayout. butflexThe layout andGridThere is a real difference in layout, and that isflexThe layout is a one-dimensional layout,GridThe layout is a two-dimensional layout.flexLayouts can only handle the layout of elements on one dimension, one row or one column at a time.GridThe layout is to divide the container into “rows” and “columns”, resulting in a grid. We can place the grid elements in relation to the rows and columns to achieve the purpose of our layout. Look at the following example

<! DOCTYPEhtml>
<html>
    <head>
        <title>Grid2 layout</title>
        <meta charset="UTF-8">
        <style>
            * {
                margin:  0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                display: grid;
                grid-template-columns: repeat(4.1fr);
                grid-auto-rows: minmax(100px,auto);
                grid-gap: 10px;
                background-color: skyblue;
            }
            .item {
                border: 1px solid cyan;
                text-align: center;
            }
            .item0{
                background-color: slateblue;
                grid-row: 1/2;
                grid-column: 1/5;
            }
            .item1 {
                background-color: slategray;
                grid-row: 2/3;
                grid-column: 1;
            }
            .item2 {
                background-color: springgreen;
                grid-row: 2/3;
                grid-column: 2/3;
            }
            .item3 {
                background-color: teal;
                grid-row: 2/3;
                grid-column: 3/4;
           }
            .item4 {
                background-color: wheat;
                grid-row: 2/4;
                grid-column: 4/5;
            }
            .item5 {
                background-color: #BEE7E9;
                grid-row: 3/4;
                grid-column: 1/3;
            }
            .item6{
                background-color: #E6CEAC;
                grid-row: 3/4;
                grid-column: 3/4;
            }
            .item7{
                background-color: #ECAD9E;
                grid-row: 4/5;
                grid-column: 1/5;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item0 item">item0</div>
            <div class="item1 item">item1</div>
            <div class="item2 item">item2</div>
            <div class="item3 item">item3</div>
            <div class="item4 item">item4</div>
            <div class="item5 item">item5</div>
            <div class="item6 item">item6</div>
            <div class="item7 item">item7</div>
        </div>
    </body>
</html>
Copy the code

The above code basically covers the properties of the Grid that we often use

display: grid Set:containerContainers are laid out for a grid
grid-template-columnswithgrid-template-rows: Sets the column width and row height of the grid. The values can be as follows:

  /* declare three columns with width 200px, 100px, 200px */
  grid-template-columns: 200px 100px 200px;
  /* Declare two lines with a height of 50px 50px */
  grid-template-rows: 50px 50px;
Copy the code

Or use repeat() as in our example, which takes two arguments. The first argument is the number of repetitions. the second argument is the value to be repeated. In our example grid-template-columns: repeat(4,1fr); There is a new unit, FR, which represents an equal portion of the available space in the grid container, similar to flex’s Flex-grow. Grit-template-columns: 200px 1fr 2fr Indicates that the width of the first column is set to 200px, and the remaining width is divided into two parts, one third of the remaining width and two thirds of the remaining width.

grid-auto-rows 与 grid-auto-columnsWe have not defined the width and height of the network. Take the example aboveThe grid - the template - the columns: repeat (4, 1 fr);We just specify the number of columns, and the width, but we don’t specify the row height, so the grid will fetchgrid-auto-rows: minmax(100px,auto);For the row height.minmax()The function generates a range of lengths within which lengths can be applied to grid items. It takes two parameters, a minimum and a maximum.
grid-gap: represents the size of the gap between grids, or the gap between the row and column can be isolated:grid-row-gapAttributes,grid-column-gap.
grid-rowandgrid-column: indicates the starting and ending grid lines of the four borders of a single item, so as to determine the size and position of a single grid. We divide the item into a grid of four rows and four columns, so the horizontal grid line is 1-5, and the vertical grid line is also 1-5. Here is the value of Item0grid-row: 1/2; grid-column: 1/5;Stands for: row height from first to second grid line, column width from first to fifth grid line.

Take a look at its browser support, the overall compatibility is good, but not in IE10 below.

More information about grid properties can be found here: Grid Layout

Third, the application of layout

Through the above learning we understand the common Web development of several layouts, let’s apply these layouts to our actual development, we will be the most common layout to illustrate

1. Dual column layout implementation

The two-column layout is often used in our Web development, such as the CSDN content details page below. Main features: one side of the column is fixed, the other side of the column width is adaptive.

To do this, we use a float+margin approach, where the left column floats and the right side sets the left margin.

<! DOCTYPEhtml>
<html>
    <head>
        <title>Double column layout</title>
        <meta charset="UTF-8">
        <style>
            * {
                margin:  0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                background-color: white;
            }
            .left {
                float: left;
                width: 200px;
                height: 200px;
                background-color: rosybrown;
            }
            .right {
                margin-left: 210px;
                height: 100px;
                background-color: saddlebrown;
            }
            .last {
                height: 30px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="left">On the left side of the</div>
            <div class="right">On the right side</div>
            <div style="clear:both"></div>
        </div>
        <div class="last">The content of</div>
    </body>
</html>
Copy the code

Implementation effectBe careful to givecontainerAdd a child element with an empty content<div style="clear:both"></div>To clear the impact of the float.

2. Realization of three-column layout

Three column layout is also the layout we often encounter, its main features are: fixed width on both sides, the middle of the adaptive. There are several ways to implement a three-column layout, four of which are covered here

(1) Position + margin realization

Implementation ideas:

Set the parent element to relative positioning, and the left and right columns to absolute positioning, fixed on the left and right sides of the page
The main column in the middle is stretched with left and right margin values

.box {
     /* The parent element sets the relative position, otherwise the left and right columns will be offset relative to the Body element */
     position: relative;
     background-color:wheat;
}
.middle {
     height: 100px;
     margin-left: 110px;
     margin-right: 110px;
     background-color:royalblue;
}
.left {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100px;
     height: 100px;
     background-color:salmon;
}
.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background-color:sandybrown;
}
Copy the code

<div class="box">
   <div class="left">On the left</div>
   <div class="middle">In the middle</div>
   <div class="right">On the right</div>
</div>
<div>Content of the tail</div>
Copy the code

Let’s see how that works

(2) Grail layout

Implementation ideas:

Set width to 100% for the middle element that takes the first position to render first
The left, middle and right elements float left and clear the impact of the float
The left element sets the left margin to -100% to cause the left element to rise a row and be at the leftmost position, and the right element sets the left margin to be a negative value of its width so that the right element rises a row to the rightmost position.
Setting the left and right padding of the parent element leaves room for the left and right elements to display the content of the middle element.
Sets the left and right elements to relative positioning, with left and right being negative values of the width of the inner margin.

Code implementation

<body>
    <div class="box">
       <div class="middle">In the middle</div>
       <div class="left">On the left</div>
       <div class="right">On the right</div>
       <div style="clear: both;"></div>
   </div>
<div class="last">behind</div>
</body>
Copy the code

CSS

body {
     /* Set the minimum body width */
     min-width: 800px;
}
.box {
     padding: 0 210px;
     width: 100%;
     background-color:red;
}
.middle {
     float: left;
     width: 100%;
     height: 200px;
     background-color:royalblue;
}
 .left {
     float: left;
     width: 200px;
     height: 200px;
     background-color:salmon;
     /* The left margin is -100% so that the left element goes up one row and is at the leftmost position */
     margin-left: -100%;
     /* Relative positioning */
     position: relative;
     left: -210px;
}
.right {
     float: left;
     width: 200px;
     height: 200px;
     background-color:sandybrown;
     The element sets the left margin to a negative value of its own width so that the right element rises one row to the rightmost position */
     margin-left: -200px;
     /* Relative positioning */
     position: relative;
     right: -210px; 
}
.last {
     background-color:thistle;
     height: 40px;
}
Copy the code

The effect

(3) Double wing layout

Implementation ideas:

In the middle, the method of nested child elements is adopted, and the width is adaptive
The left, middle and right elements float left and clear the impact of the float
The left element sets the left margin to -100% to cause the left element to rise a row and be at the leftmost position, and the right element sets the left margin to be a negative value of its width so that the right element rises a row to the rightmost position.
Set the left and right margins of the child elements of the middle element to leave the left and right elements blank to display the content of the middle element.

Code implementation

<body>
    <div class="container">
        <div class="middle">In the middle</div>
    </div>
    <div class="left">On the left side of the</div>
    <div class="right">On the right side</div>
    <div style="clear: both;"></div>
    <div class="last">The tail</div>
</body>
Copy the code

CSS

body {
   min-width: 800px;
}
.container{
    float: left;
    /* The size of the entire container */
    width: 100%;
    height: 200px;
    background: #ddd;
}
.container .middle{
    height: 200px;
    /* Set the left and right margins */
    margin: 0 160px;
    background-color:slateblue;
}
.left{
    float: left;
    width: 150px;
    height: 200px;
    background-color: rosybrown;
    margin-left: -100%;
}
.right{
    float: left;
    width: 150px;
    height: 200px;
    background-color:saddlebrown;
    margin-left: -150px;
}
.last {
     background-color: tomato;
}
Copy the code

The effect

The Grail layout is the same as the wing layout in the previous part of the implementation. The same is the left and right column width, the middle column adaptive. Use float and negative margins to align the left and right columns with the middle. Much of the difference lies in the way the middle elements are displayed. Holy Grail layout uses the parent element to set the inner margin method, left and right elements set relative positioning assistance. The two-wing layout adopts the method of nested child elements in the middle, which is displayed by setting the margin of the child elements.

(4) Flex layout implementation

Compared to the previous two implementations, using the Flex layout directly makes it easier to implement a three-column layout

<div class="container">
     <div class="left">On the left side of the</div>
     <div class="middle">In the middle</div>
     <div class="right">On the right side</div>
</div>
Copy the code

CCS

.container {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: flex-start;
     background-color: wheat;
     /* height: 100vh; * /
}
.left {
     width: 150px;
     height: 200px;
     background-color: rosybrown;
}
.right {
     width: 150px;
     height: 200px;
     background-color: saddlebrown;
}
.middle {
     /* The width of the remaining area */
     flex: 1;
     height: 200px;
     background-color: seagreen;
}
Copy the code

3. Responsive layout

Responsive layout is a concept proposed by Ethan Marcotte in May 2010. In short, it means that a website can be compatible with multiple terminals — rather than having a specific version for each terminal. The concept was born as a solution to mobile Internet browsing.

For example,samsungWebsite design, when we change the size of the browser, the layout of the page will change accordingly, so how to achieve these changes? We’ll look at three implementations

(1) Media inquiry`CSS3-Media Query`

Using the @media query, you can define different styles for different media types. When you resize the browser, the page will also rerender the page according to the width and height of the browser. grammar

@media mediatype and|not|only (media feature) {
    CSS-Code;
}
Copy the code

mediatype: Media type, for example:screen: Computer screen (default),tv: TV equipment, etc
and|not|only: Logical operator

“And” : combines multiple media properties into a single media query. “Not” : Inverts the result of a media query. “only” : applies the specified style only when the media query matches successfully

media feature: Most media attributes, prefixed with “min-” and “Max -“, used to indicate “greater than or equal to” and “less than or equal to”. For example,width | min-width | max-width.height | min-height | max-height.aspect-ratio | min-aspect-ratio | max-aspect-ratioEtc.

Adaptive responsive development often requires adding multiple breakpoints for different screens. Here’s an example

<div class="container">
   <div class="item item0">item0</div>
   <div class="item item1">item1</div>
   <div class="item item2">item2</div>
   <div class="item item3">item3</div>
   <div class="item item4">item4</div>
   <div class="item item5">item5</div>
   <div class="item item6">item6</div>
   <div class="item item7">item7</div>
</div>
Copy the code

CSS

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width.initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    body {
        background-color: white;
    }
    /* When the screen size is greater than or equal to 1025 style */
    @media only screen and (min-width: 1025px) {body {
            background-color: wheat;
        }
        .item {
            float: left;
            border: 1px solid skyblue;
            width: 300px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin: 10px 30px; }}/** The screen size of the iPad is larger than or equal to 768 and smaller than or equal to 1024 portrait **/
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
        body {
            background-color: rosybrown;
        }
        .item {
            float: left;
            border: 1px solid skyblue;
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin: 5px 20px; }}/** iPhone screen size 767 portrait style **/
    @media only screen and (max-width: 767px) {body {
            background-color:royalblue;
        }
        .item {
            float: left;
            border: 1px solid skyblue;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin: 5px 10px;
        }
    }    
</style>
Copy the code

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">This code stops the user from zooming in and out of the page manually
Three breakpoints are set to show different styles depending on the screen width.
One more thing to note@mediaInternet Explorer 9 and below are not supported, additional code is required to support them

  <! --[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script SRC = "https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js" > < / script > <! [endif]-->
Copy the code

(2) Grid implements responsive layout

The second way is mainly to usegridTo implement the response layout. Let’s say we have a requirement that we don’t want the Item to be too small, we need a minimum width limit, and we don’t want to see white space on the right side as the viewport width increases. Achieve the following

<! doctypehtml>
<html>
  <head>
  	 <title>Responsive layout 2</title>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
       <style>
           * {
               padding: 0;
               margin: 0;
               box-sizing: border-box;
           }
           body {
               background-color: white;
           }
		   .container {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(300px.1fr));
				grid-gap: 10px 20px;
				grid-auto-rows: 50px;
		   }
		   .item {
				border: 1px solid skyblue;
				text-align: center;
				margin: 10px 30px;
				height: 50px;
				line-height: 50px;
          }	
       </style>
  </head>
	<body>
		<div class="container">
			<div class="item item0">item0</div>
			<div class="item item1">item1</div>
			<div class="item item2">item2</div>
			<div class="item item3">item3</div>
			<div class="item item4">item4</div>
			<div class="item item5">item5</div>
			<div class="item item6">item6</div>
			<div class="item item7">item7</div>
		</div>
	</body>
</html>
Copy the code

aboutgridWe’ve already introduced the properties of the The only thing not introduced isauto-fitKey words,repeat()The createitem () function is used to create multiple items. The first argument is the number of items. The second argument is the sizeauto-fitThe idea is that the numbers are adaptive, as long as they fit, they go up.

(3)Columns grid system

Columns grid system often needs to rely on a UI library, such as Bootstrip or Element UI.

BootstrapFrom Twitter, is a front-end framework for the rapid development of Web applications and websites. It provides a responsive, mobile-first streaming grid system that automatically divides viewports into up to 12 columns as the screen or viewport size changes. It adds multiple media query breakpoints according to the size of the current viewport, allowing developers to easily adjust the overall viewport width of each grid according to the viewport size.
The Bootstrap (5.0)There are six default response sizes:xs,sm,md,lg,xl,xxl, the corresponding relationship is as follows

Its basic grid structure

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">.</div>
</div>
Copy the code

Use rules

Rows must be placed in.containerClass for proper alignment and padding
Use rows to create horizontal groups of columns, the contents should be placed inside columns, and only columns can be direct children of rows
Predefined grid classes, such as.row and.col-XS-4, can be used to quickly create grid layouts.
The grid system is created by specifying the twelve available columns that you want to span. For example, to create three equal columns, use three.col-xS-4.

Example:

<! doctypehtml>
<html lang="zh-CN">
  <head>
    <! -- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap</title>
    <! Bootstrap CSS file -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        .item {
            height: 50px;
        }
    </style>
  </head>
  <body>
      <div class="container">
          <div class="row g-1">
              <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 item bg-light border">item0</div>
              <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 item bg-light border">item0</div>
              <div class="col-xs-12 col-sm-12 col-md-4 col-lg-3 item bg-light border">item0</div>
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 item bg-light border">item0</div>
          </div>
      </div>
  </body>
</html>
Copy the code

The effectotherThe official sampleThe responsive layout of the Element UI works in a similar way to Bootstrap and will not be covered here. Want to learn more aboutBootstrapandElement UIClick on them for related content

Four,

As a front-end small white, after learning Html, CSS, JavaScript and so on a pile of things, until the real start to write Web pages or confused, recall that just learning to write a client must start from the basic page layout, so there is this article. Therefore, this article is mainly aimed at front-end beginners, but also please don’t spray. Of course, because the author’s level is limited, it is hard to avoid mistakes, if there is a problem, please give advice. Bootstrap Element UI CSS layout Complete guide to Grid layout

Summary of common Web development layouts

Summary of a.

Ii. Layout types

1. Common flow layout

2. Floating layout

3. Positioning and layout

(1) Relative positioningrelative

(2) Absolute positioningabsolute

(3) Fixed positioningfixed

(4) Positioning supplement

4. The flex layout

5. The grid layout

Third, the application of layout

1. Dual column layout implementation

2. Realization of three-column layout

(1) Position + margin realization

(2) Grail layout

(3) Double wing layout

(4) Flex layout implementation

3. Responsive layout

(1) Media inquiryCSS3-Media Query

(2) Grid implements responsive layout

(3)Columns grid system

Four,

Related Posts

😁 the most useful JS function in the business (1)

Nova for Mac is a code editor for programmers

Promise basic concepts and basic examples to use

(1) Relative positioning`relative`

(2) Absolute positioning`absolute`

(3) Fixed positioning`fixed`

(1) Media inquiry`CSS3-Media Query`