course

CSS: Layout on the Grid

2 students
Course updated 25 July 2023
Course CSS: Layout on the Grid
$49 per month
for all Hexlet's courses
Sign up
  • In-browser editor for exercises
  • Permanent access to theory
  • Asynchronous learning

Included in the course

7 lessons (video or text)
8 exercises in the IDE
23 quizzes
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.

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.

Course program

Estimated time: 6 hours
  • 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

    quiz

  • 3

    First grid

    Learning about the properties that allow you to create grids using CSS Grid Layout

    quiz

    exercise

  • 4

    Arrangement of elements in the grid

    Learning the properties that allow you to arbitrarily arrange elements within a grid

    quiz

    exercise

  • 5

    Working with a grid

    Learning about the indentation between strips and the alignment of the grid strips

    quiz

    exercise

  • 6

    Implicit grid

    Learning the differences between the explicit and implicit grid, grid-auto-rows and grid-auto-columns

    quiz

  • 7

    Positioning and Grid

    Studying the effect of positioning properties and z-index when used within a grid

    quiz

  • 8

    Additional resources

    Some materials the Hexlet team have picked up. This will give you a more in-depth understanding of the topic

Challenges

We recommend working on these challenges after completing the course. They'll help you obtain more experience in programming and strengthen your new skills.

#
Challenge
completion rate
1
-

Recommended program

profession
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time
profession
Development of front-end components for web applications
10 months
from scratch
Start at any time
profession
new
Developing web applications with Django
10 months
from scratch
under development
Start at any time