-BootStrap4 common grid system CSS notes

.row	Defines a row
.col	Average number of columns, up to row 12. Each column around each gap 15px
.to col- {1 12}	In all definitions the column width of the screen
.col- {sm \| md \| lg \| xl} - {1 12} to	In the definition of the screen of the column at the specified column width, sm: Screen> = 576px, md: Screen> = 720px, lg: Screen> = 960px, xl: Screen> = 1200px
to .offset- {1 11}	In all column offset screen
.offset- {sm \| md \| lg \| xl} - {1 11} to	Column offset at a specified screen
A Code: In all screen sizes, sharing three `<div class="row"> <div class="col bg-danger">1</div> <div class="col bg-dark">2</div> <div class="col bg-light">3</div> </div>` Code II: In all screen sizes, occupy 50% of the first column, the second column at 25%, the third column at 25% `<div class="row"> <div class="col-6 bg-primary">1</div> <div class="col bg-success">2</div> <div class="col bg-info">3</div> </div>` Code III: When the screen width> = 960 pixels, the first column at the 50%, 10% occupied by the second row, third column at 25%, the screen is less than 960 pixels, the width of each column at 100% `<div class="row"> <div class="col-lg-6 bg-primary">1</div> <div class="col-lg-3 bg-success">2</div> <div class="col-lg-3 bg-info">3</div> </div>` Code IV: column 1 at all screen sizes are shifted one column to the right width of the cell. An offset width of the cell column when a column to the right of the screen width 2> = 960 pixels `<div class="row"> <div class="col-lg-5 offset-1 bg-primary">1</div> <div class="col-lg-2 offset-lg-1 bg-success">2</div> <div class="col-lg-3 bg-info">3</div> </div>`

Intelligent Recommendation

CSS grid system summary

CSS grid system summary 11.1 Declaration Grid Project 11.2 Raster line drawing 11.2.1 Default grid line draw setting 11.2.2 Raster line drawing 11.2.3 Combination Writing 11.3 Spacing setting 11.4 ele...

CSS - grid system

What is the grid? Grid Layout is the most powerful layout system in CSS. This is a two-dimensional system that means it can handle columns simultaneously. compatibility:refer to https://caniuse.com/ D...

In-depth analysis of the fourth chapter of CSS grid system-reading notes

4.5 Grid System The reusability of code can be improved with the help of grid system The grid system provides a series of class names that can be added to the markup to structure a part of the web pag...

CSS: GRID grid layout common attribute

1. Specify the container to use the grid layout:display: grid 2, specify that the container is set to within the line element and use the grid layout:display: inline-grid 3, define the column width of...

Grid: CSS common classic layout

table of Contents Several classic layouts for CSS commonly used based on Grid First, space hitting layout Second, two column layout Third, sandwich layout Fourth, the holy cup layout Several cl...