Make layout as fast as 5G: CSS Grid grid layout-Free online video tutorial-php.cn

Community Learn Tools Library Leisure

English

Make layout as fast as 5G: CSS Grid grid layout

Grid (Grid Layout): The first true layout technology in CSS and the pinnacle of CSS layout. It completely bids farewell to the one-dimensional model and steps into a new era of two-dimensional space layout....

Advanced

29191 person learning

18class hour

03 hours 48 minutes 47 secondsTotal course duration

2022-04-20update

PHP中文网

Gold lecturer

A total of 51 courses Student5296 Lecturer rating5.0

认证高级PHP讲师More>>

Course Introduction Course Outline Data Download Other Courses

You will learn：

Thoroughly master the principles, common attributes, and application scenarios of Grid layout, and say goodbye to "layout phobia"

Make layout as fast as 5G: CSS Grid grid layout

Chapter1 Create grid container
expand retract

Section1 1. Create and divide grid containers (1)
duration： 16 minutes 43 seconds

Section2 1. Create and divide grid containers (2)
duration： 14 minutes 34 seconds
Chapter2 Number and size of cells
expand retract

Section1 Set the number and size of cells(1)
duration： 12 minutes 00 seconds

Section2 Set the number and size of cells(2)
duration： 13 minutes 40 seconds
Chapter3 Grid lines divide cells
expand retract

Section1 Divide cells using default grid lines(1)
duration： 11 minutes 52 seconds

Section2 Divide cells using default grid lines(2)
duration： 13 minutes 50 seconds

Section3 Divide cells using named grid lines
duration： 13 minutes 12 seconds

Section4 Named grid lines automatically add indexes when setting cells repeatedly
duration： 12 minutes 11 seconds
Chapter4 Items populate the area
expand retract

Section1 Populate items into the default grid area
duration： 16 minutes 41 seconds

Section2 Populate items into a named grid area
duration： 11 minutes 58 seconds

Section3 Populate items into grid area placeholders
duration： 06 minutes 31 seconds

Section4 Named grid area lines default name
duration： 13 minutes 34 seconds
Chapter5 Alignment of items
expand retract

Section1 Set the alignment of all items in the container(1)
duration： 11 minutes 39 seconds

Section2 Set the alignment of all items in the container(2)
duration： 11 minutes 17 seconds

Section3 Set the alignment of all items in the cell
duration： 14 minutes 52 seconds

Section4 Set the alignment of all items within the grid area
duration： 08 minutes 48 seconds

Section5 Set the alignment of an item within a cell or grid area
duration： 12 minutes 19 seconds

Section6 Set the spacing between rows and columns in the container
duration： 13 minutes 06 seconds

Data Name operate
[must see]Grid grid layout source code Download

PHP中文网 Lecturer Other Courses

Elementaryhtml5 Chinese manual

5512
Collection
ElementaryCSS 2.0 Chinese Manual

6116
Collection
ElementaryCSS 3.0 Reference Manual

3773
Collection
AdvancedPlay with CSS Flexbox layout

25473
Collection
AdvancedMake layout as fast as 5G: CSS Grid grid layout

29191
Collection
ElementaryThe front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]

163118
Collection
ElementaryBootstrap3 reference manual

3339
Collection
ElementaryFoundation5 Manual

903
Collection
ElementaryJavaScript Reference Manual

9456
Collection
ElementaryjQuery1.11 Reference Manual

9118
Collection
ElementaryjQuery1.7 Chinese manual

5733
Collection
ElementaryjQuery_API_1.4.4 Manual

4225
Collection

Start Learning

This course includes：

03 hours 48 minutes 47 seconds Watch videos anytime

1 Download Resources

Popular courses Latest courses

More>