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

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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

27020 person learning

18 class hour

03 hours 48 minutes 47 seconds Total course duration

2022-04-20update

PHP中文网

Gold lecturer

A total of 51 coursesStudent5294 Lecturer rating5.5

认证高级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 Nameoperate
[must see]Grid grid layout source code Download

PHP中文网 Lecturer Other Courses

Elementary html5 Chinese manual

5508
Collection
Elementary CSS 2.0 Chinese Manual

6109
Collection
Elementary CSS 3.0 Reference Manual

3773
Collection
Advanced Play with CSS Flexbox layout

23594
Collection
Advanced Make layout as fast as 5G: CSS Grid grid layout

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

137902
Collection
Elementary Bootstrap3 reference manual

3335
Collection
Elementary Foundation5 Manual

901
Collection
Elementary JavaScript Reference Manual

9432
Collection
Elementary jQuery1.11 Reference Manual

9118
Collection
Elementary jQuery1.7 Chinese manual

5729
Collection
Elementary jQuery_API_1.4.4 Manual

4224
Collection

Start Learning

This course includes：

03 hours 48 minutes 47 seconds Watch videos anytime

1 Download Resources

Popular courses Latest courses

More>

About us Disclaimer Sitemap: php.cn：Public welfare online PHP training，Help PHP learners grow quickly！