illustration for Build Modern Layouts with CSS Grid
pro

Build Modern Layouts with CSS Grid

22m closed-captioning
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.6
458
people completed
Published a year ago
|
Updated a year ago

The CSS Grid Layout introduces a two-dimensional grid system allowing both fixed and flexible track sizes to be defined. This allows for easy management of an app's layout.

You'll start with an empty HTML file with minimal global styles applied in your CSS file. You will then iteratively add sections and items to your HTML page to structure through a CSS grid.

You'll also learn how to control a grid's columns and rows and define the size of each respectively.

By the end of the course, you'll have a fully responsive landing page that behaves how you expect it to on any device.

What you'll learn:

  • Grid is a set of intersecting horizontal and vertical lines defining columns and rows.
  • Elements can be placed onto the grid within these column and row lines
  • fr unit represents a fraction of the available space in the grid container
  • Flexbox is one dimensional vs. CSS Grid is two dimensional.
  • The implicit vs. explicit grid

Questions to Think About:

  • What are the tradeoffs of using CSS Grid?
  • When should I introduce CSS Grid into my projects?
  • How can I keep accessibility in mind when creating two-dimensional layouts?

Learner Reviews

  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Great css grid course, well explained.

    Fredj Khlifi
    a month ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Great summary of the major features of CSS Grid. Would have liked a peek at the HTML at the start of each lesson to save some guesswork, otherwise very useful.

    Learner
    4 months ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    I loved that it's fast and small, but some of the concept about alignement for the header and logo wasn't clear to me -> Making all the elements "aligned" with the grid-template-columns: 1fr; trick is still a mystery to me

    Etenne-Joseph Charles
    5 months ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    concrete. sometimes seeing the markup and not only the css will be helpful

    Matias Strizzolo
    5 months ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Simplicity, precise content, direct on target.

    Learner
    6 months ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    I love this course. CSS Grid works like a charm đŸ€—

    Akiko Takano
    6 months ago

Course Content

22m ‱ 13 lessons

    You might also like these resources:

    illustration for CSS Fundamentals
    Tyler Clark・33m・Course

    Even the most experienced developer can learn something new when it comes to using and understanding how the browser interprets CSS. In this course, we will slowly style a website according to a mocked image

    illustration for Flexbox Fundamentals
    Garth Braithwaite・18m・Course

    Flexbox is a wonderful tool built into the CSS specification. Using flexbox doesn't require any special framework or library, just a browser with CSS3 support. It is so awesome, and makes the arranging elements on a page almost fun!

    illustration for Build Complex Layouts with CSS Grid Layout
    Rory Smith・42m・Course

    CSS Grid layout is a two-dimensional layout method that gives you control over items in rows as well as columns. In this course we will look at multiple ways to divide the page into major regions with control of the size, position, and layer.