Build Modern Layouts with CSS Grid
Instructor
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.
Credits
Kamil Khadeyev (illustration)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 Reflect Upon:
- 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
- Marc Loan5 months agoWhat did you like about this course?
Short, targeted and very practical videos. Easy to test yourself and very well explained.
I like the fact of seeing small mistakes along the way.
- Chris7 months agoWhat did you like about this course?
The bite-sized lessons are perfect.
- Peter Olah10 months agoWhat did you like about this course?
good examples that are useful in practice
- Attila Csanyi11 months agoWhat did you like about this course?
Really useful and easy to follow examples. I am keep looking back to repeat as these are really handy grid tricks to make responsive sites much faster.
- jdunham2a year agoWhat did you like about this course?
Very knowledgeable teacher. Easy to follow explanations and uses common and practical examples as layouts to build with grid
- gelatin-heroa year agoWhat did you like about this course?
I think I really understood CSS grid. Great examples and course structure. Felt the course ended a bit too soon with very few examples.
I'd really like to understand the trade-offs between grid and flex better and when to pick one over the other.
Course Content
You might also like these resources:
CSS Fundamentals
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
Flexbox Fundamentals
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!
Build Complex Layouts with CSS Grid Layout
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.