Build Modern Layouts with CSS Grid
Hiroko Nishimura
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
Credits
Kamil KhadeyevCourse Content
You might also like these resources:
All developers can learn something new when it comes to using and understanding how the browser interprets CSS. We will slowly style a website according to a mocked image.
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.
CSS Grid Layout is a two-dimensional layout method that gives you control over items in rows and columns. We will look at ways to divide the page into major regions.