CSS: Layout on the Grid
Course updated 28 March 2023
Included in the course
7 lessons (video or text)
8 exercises in the IDE
Assistance in Discussions on the website
Access to other courses of the our platform
What you'll 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.
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 that has been used in print products for a hundred years. To do this, they used a table layout, a layout using Float and Flex. Each of these methods had limitations and development challenges. CSS Grid Layout appeared in 2011 and over the years has acquired many features and approaches that make it easier to create layouts using CSS.
IntroductionGet to know the Grid concept. Learn about the key points and differences from Flex
TerminologyTo learn the concepts of grids and their components in CSS Grid Layout
First gridLearn about the properties that allow you to create grids using CSS Grid Layout. Create the first 12 column grid. Learn about the units of measurement fr
Arrangement of elements in the gridLearn the properties that allow you to arbitrarily arrange elements within a grid. Learn how to name lines/areas and use them when arranging elements.
Working with a gridTo study the indentation between strips and the alignment of the grid strips.
Implicit gridLearn the differences between the explicit and implicit grid. Learn the properties of grid-auto-rows and grid-auto-columns
Positioning and GridTo study the effect of positioning properties and z-index when used within a grid
Additional resourcesSome materials the Hexlet team have picked up. This will give you a more in-depth understanding of the topic
We recommend working on these challenges after completing the course. They'll help you obtain more experience in programming and strengthen your new skills.
Suggested learning programs
Layout with the latest CSS standards
5 months •from scratch
Start at any time