In this video I go over how to get started with CSS Grid. I show you how to take Sketch designs to create the layout structure. Then I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then make the grid in CSS. I use grid-template-columns and grid-template-rows to define the number and size of each element and then I use grid-template-areas to define each block of the design.

View the final code here: [ Ссылка ]

In this video I show you:
0:13 - How to get started with CSS Grid
1:04 - How to add grid lines to your project design
2:28 - How to start this design in Codepen
3:08 - How to get started with display:grid
3:40 - How to create grid columns
4:07 - How to create grid rows
4:26 - How to use fr
5:27 - How to include a grid column gap
5:53 - How to include a grid row gap
6:51 - How to include grid repeat()
7:59 - How to use grid-column
10:27 - How to reorganize the containers on the screen using css grid
11:14 - How to use grid template areas
14:05 - How to leave a gap in the grid
14:25 - How to create a nested css grid
16:04 - How to use minmax()
16:54 - How to justify content center
17:03 - How to align content center

Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: [ Ссылка ]...

Let's Connect
Dribbble: [ Ссылка ]
Blog: [ Ссылка ]

#cssgrid #htmlcss #cssgridcrashcourse

свернуть