Course “CSS: Layout on the Grid”
Course updated on July 24, 2023
Access this and all courses with a subscription
What's included
Description
This course is dedicated to the CSS Grid Layout module, a technological tool for creating grids in CSS. After the Flex module arrived, there was a need to control elements in two axes simultaneously. The developers wanted to take the grid system used in print products for a hundred years. To do this, they used a table layout using Float and Flex. Each of these methods had limitations and development challenges. CSS Grid Layout appeared in 2011 and has acquired many features and approaches that make it easier to create layouts using CSS.
You will learn
- The basic properties of CSS Grid Layout.
- Create and manage the space within grids.
- Manage the layout of HTML elements within a grid.
- Adapt grids for different screen resolutions.
Syllabus
1 | Introduction Getting to know the Grid concept, the key points and differences from Flex |
2 | Terminology Learning the concepts of grids and their components in CSS Grid Layout |
3 | First grid Learning about the properties that allow you to create grids using CSS Grid Layout |
4 | Arrangement of elements in the grid Learning the properties that allow you to arbitrarily arrange elements within a grid |
5 | Working with a grid Learning about the indentation between strips and the alignment of the grid strips |
6 | Implicit grid Learning the differences between the explicit and implicit grid, grid-auto-rows and grid-auto-columns |
7 | Positioning and Grid Studying the effect of positioning properties and z-index when used within a grid |
Challenges
1 | |
2 | keyboard component |
3 | Futuristic poster |
4 | Neoplasticism |
5 | Swiss poster |
Recommended programs
- Run code right in the browser
- Lifetime access
- Learn at your own pace
Access this and all courses with a subscription