Grid
In this course, you will master a technology that was recently added to CSS! This is a long-awaited improvement to laying-out and positioning elements on web pages.
Start
Key Concepts
Review core concepts you need to learn to master this subject
CSS Block Level Grid
CSS Inline Level Grid
Grid Template Columns
fr Relative Unit
minmax() Function
CSS grid-row-gap
Grid Gap
grid-row-start & grid-row-end
CSS Block Level Grid
CSS Block Level Grid
#grid-container {
display: grid;
}CSS Grid is a two-dimensional CSS layout system. To set an HTML element into a block-level grid container use display: grid property/value. The nested elements inside this element are called grid items.
- 1Using CSS, you can elegantly lay out elements on a web page. There is no simple answer for how best to do this—depending on what content you are trying to display, multiple different techniqu…
- 2To set up a grid, you need to have both a grid container and grid items. The grid container will be a parent element that contains grid items as children and applies overarching styling and pos…
- 3By default, grids contain only one column. If you were to start adding items, each item would be put on a new row; that’s not much of a grid! To change this, we need to explicitly define the number…
- 4We’ve learned how to define the number of columns in our grid explicitly. To specify the number and size of the rows, we are going to use the property grid-template-rows. This property is almost i…
- 5The shorthand property, grid-template, can replace the previous two CSS properties. Both grid-template-rows and grid-template-columns are nowhere to be found in the following code! .grid { displ…
- 10In this lesson, we have learned how to define a grid container. When explicitly defining a grid, you have to declare the quantity of rows and columns and their respective sizes. In all of our exa…
- 11Using the CSS properties grid-row-start and grid-row-end, we can make single grid items take up multiple rows. Remember, we are no longer applying CSS to the outer grid container; we’re adding CSS …
- 13The previous three properties also exist for columns. grid-column-start, grid-column-end and grid-column work identically to the row properties. These properties allow a grid item to span multiple …
What you'll create
Portfolio projects that showcase your new skills
PupSpa
It's time to build fluency in CSS Grid Layout. In this next Pro Project, we're going to practice Grid Positioning in CSS so you can hone your skills and feel confident taking them to the real world. Why? Using CSS grid allows you to conveniently organize data so that you can then easily manipulate across all platforms. What's next? Doggy daycare, grooming salon, puppies-css galore. You got this!
CSS Grid: Task Board
It's time to build fluency in CSS Grid Layout. In this next Pro Project, we're going to practice organization in CSS so you can hone your skills and feel confident taking them to the real world. Why? You'll need to get comfortable with defining columns and rows and controlling the elements within them in order to build beautiful websites. What's next? To-do list, project organization, more CSS Grid. You got this!
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory