The Complete Advanced Guide to CSS/

...

/

Time to Code — CSS Grid, Hands-on

Time to Code — CSS Grid, Hands-on

Now let’s take baby steps to building a clone of the famous music app, Catty Music 😁

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 making body a grid-container

Now we can go on to define the row and column structure within the grid.


...