Search⌘ K
AI Features
Home
Courses
The Complete Advanced Guide to CSS

Time to Code — CSS Grid, Hands-on

Explore the basics of setting up a CSS Grid layout using both fixed and flexible fractional units. Understand how to create rows and columns that adapt responsively while maintaining semantic HTML structure. This lesson helps you apply practical techniques for dynamic web design using CSS Grid and Flexbox.

We'll cover the following...

How to Create the Basic Grid Setup for Catty Music

We will kick off with a very basic html document.


<body>
   <aside></aside>
   <main></main>
   <footer></footer>
</body>

There’s a bit of foresight involved in choosing this structure. You’ll understand very soon.

Also note how semantic the markup is. This is one of the advantages of using the CSS grid. You save yourself the hassles of using redundant container markup.

Now style the document.


body {
   display: grid;
   min-height: 100%
}

This will kick off the grid formatting context by ...