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
Grid Template Columns
fr Relative Unit
Grid Gap
CSS Block Level Grid
CSS grid-row
CSS Inline Level Grid
minmax() Function
grid-row-start & grid-row-end
Grid Template Columns
Grid Template Columns
#grid-container {
display: grid;
width: 100px;
grid-template-columns: 20px 20% 60%;
}To specify the number of columns of the grid and the widths of each column, the CSS property grid-template-columns is used on the grid container. The number of width values determines the number of columns and each width value can be either in pixels(px) or percentages(%).
What you'll create
Portfolio projects that showcase your new skills
CSS Grid: 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!
CSS Grid: Architecture Blog
It's time to build fluency in CSS Grid Layout. In this next Pro Project, we're going to practice Positioning in CSS so you can hone your skills and feel confident taking them to the real world. Why? Proficiency in the positioning of elements on your web page, specifically overlapping, will prove very useful with building projects in CSS. What's next? World famous architecture, avant-garde, more CSS Grid fun. You got this!
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory
Grid
Start