There exists a wide amount of articles on the CSS Grid. I have written a lot of myself. It is no surprise that the CSS Grid has been the talk of the CSS community for sometime now.

Yeah, that’s pretty impressive. But let’s take a different approach to the CSS Grid and CSS layouts in general.

Ready?

Let’s go.

How Did We Get Here?

A people without the knowledge of their past history, origin and culture is like a tree without roots — Marcus Garvey

The CSS Grid layout (or perhaps, Flexbox) will feel like a shiny new toy if you do not know how we got to this point in the history of CSS layouts. Even if you did, you will appreciate the CSS Grid layout by taking a look at some of the problems it attempts to solve.

In a nutshell, a lot of things make sense with CSS, except for crafting intelligent CSS layouts. There were just so many layout hacks In the past. I took the liberty to explain this via a case study in ‘How to Approach Layouts in 2017’

How To Approach CSS layouts in 2017 — and beyond.

So, Should You Use the CSS Grid ?

The CSS Grid layout is brilliant — true. It is the future of layouts in CSS and it is not going away anytime soon — true.

Should you use it?

The simple answer “ Yes, you should absolutely use the CSS Grid layout!”

The more involved answer is, “Honestly, it may not 100% satisfy your demands on all projects right now”

Someone once said to me, “So for a big e-commerce site operating on a B2B level, where IE11 is the largest % of browsers, the modern CSS grid standard is useless and we have to fall back to older standards like flexbox”

Well, maybe. A big ecommerce site may not be particular about building future proof layouts. If their users are mostly on IE11, they are likely to be happy just using Flexbox.

I get it.

The choice to use the CSS Grid layout must force you to answer some very serious questions.

“Should I start using the CSS Grid in production right now?”

“Must I ?”

Progressive enhancements? “Well, that sounds good in theory. Does it work in real projects?”

Using the CSS Grid layout moves the web forward

I read an answer to why Apple keeps getting rid of things, instead of adding them

There, I learned this:

“Supporting legacy is not always the best answer. Dropping things helps the industry move forward to adopt newer, better, formats.”

In the same way, choosing to learn and use the CSS Grid advances the web. It helps the industry embrace newer and better formats. It helps us grow as a community. A community we so love, and want to grow.

Please be a part of this growth.

Where possible, invest in a decent CSS Grid education.You’ll be helping move the web forward.

Cheers :)

Want to become Pro?

Download my free CSS Grid cheat sheet, and also get two quality interactive Flexbox courses for free!

Get them now

Should You Learn the CSS Grid or Not ? was originally published in Flexbox and Grid on Medium, where people are continuing the conversation by highlighting and responding to this story.

My 3 seconds Pitch

Hey 👋

I began writing the articles for the Flexbox and Grid publication about 3 months ago.

It’s been an amazing ‘experiment’.

I enjoy it, and have been delighted to see some of the articles get quite popular.

Why make it open?

I woke up this morning, bounced the idea off of a couple friends, and decided it’d be amazing to have other bright minds contribute to the publication.

How ?

1. Write a draft here on medium
2. Send me a link at ohansemmanuel at gmail dot com
3. I’ll take a look 👀
4. I’ll request the article to be added to the publication
5. Hit the publish button 👇

Uh, what next? Go and write a draft. I’ll wait 🌝

Write for Us was originally published in Flexbox and Grid on Medium, where people are continuing the conversation by highlighting and responding to this story.

Here are a couple courses (mostly interactive) from me:

1. Understanding Flexbox: Everything you need to know

2. The 4 (Practical) Flexbox Tricks you Need to Know

NB: This article will be updated frequently.

Free Flexbox Courses was originally published in Flexbox and Grid on Medium, where people are continuing the conversation by highlighting and responding to this story.

Introduction

The fractional unit (fr) is a new form of unit measurement in CSS — largely associated with the CSS Grid.

If you are not familiar with the CSS Fractional unit(fr), be sure to check out my dead simple introductory article.

What you didn’t know

In the most basic form, the declaration for the fractional unit may look like this:

grid-template-rows: 1fr 1fr 1fr

At the heart of the fractional unit is fractions 1.e the division of the available space in fractions. But is there more than meets the eye?

I love Examples. Who doesn’t?

Consider the image below:

The image represents a typical 2 column layout. A sidebar on the left, and a main content area on the right. The sidebar has a fixed width and the main content area expands to fill the remaining available space.

This simple layout may be written out in a few lines of code. Something along these lines:

grid-template-columns: 150px 1fr;

The 150px represents the fixed width of the sidebar and 1fr allows for the main content section to fill the remaining available space.

Thanks to the CSS Grid and fr unit, that is done.

Assume that the overall container of the grid container had a minimum width. Do you think that would affect the layout in any way?

Think for a bit. I’ll wait.

In terms of code, here is what I mean. Where .grid represent a grid container:

.grid {
  min-width: 400px;
}

The simple answer to my question is a resounding ‘Yes!. But how exactly is the layout affected?

1. The fr unit fills up the available space BUT it is NEVER smaller than the minimum size of the grid container

In a more visual form, here it is:

As the page is being resized, the fr unit will always fill the remaining available screen — hence, responsive. However it will never be lesser than the minimum width of the container.

In the example above, the main section will keep being responsive UNTIL it reaches a width of 400p ,the min-width of the grid container. At this point, the main section remains fixed. Not responsive.

Now, this does not end with setting a minimum width.

This has covered one scenario. Let’s see another.

What if an image was added within the main section?

<main>
    <img src="some-image.png"/>
</main>

Could this have any effect on the layout?

Well it depends. This leads to the second point.

2. The fr unit fills up the available space BUT it is NEVER smaller than the content of the row or column

Adding an image within the main section, you get this:

When you resize the page, the main section will NOT go below the set width of the image.

The width of the image in this example is about 430px. You may see this in action below:

As shown in the image above, the main section declared with 1fr never goes below the of the content of the row. The image above shows the horizontal scrollbars. The bars are present in a bid to accomodate the fixed main section.

This is beautiful. Later in the article I talk about how all this knowledge is useful.

However, there’s one more scenario to look at.

What if there’s a conflict in declaration?

What if for some reason you have a min-width set on the grid container, and yet have some content in the row?

.grid {
  min-width: 400px;
}

.grid img {
  width: 600px;
}

3. In the case of a conflict, the fr unit is NEVER smaller than than the maximum of the container’s minimum width or the row/column content size.

In the example above, even though the grid container has a minimum width of 400px the main section will never be smaller than the width of the image, 600px

I have created a codepen for which you may interact with all the points stated here: https://codepen.io/ohansemmanuel/pen/XgyGVE

How can this knowledge profit you?

1. Knowing the Fundamentals

At the time of this writing, the CSS Grid layout is relatively new. By implication, if you get stuck while using the CSS Grid, there may NOT be sufficient stackoverflow answers to run to :-)

Understanding how things work under the hood saves you a lot of wasted debugging time.

2. Bloated Code

In cases where you may have had to explicitly use the minmax function, you may need to rethink if it is necessary. The fr unit can pick out minimums intuitively. At least, you now know how that works now.

3. Weird Horizontal scrollers

If you have weird horizontal scrollers where you expect the grid to be responsive, check what’s going on with the fr declarations. You may have a fix here.

Want to become Pro?

Download my free CSS Grid cheat sheet, and also get two quality interactive Flexbox courses for free!

Get them now

What You Didn’t know about the CSS Fractional Unit was originally published in Flexbox and Grid on Medium, where people are continuing the conversation by highlighting and responding to this story.

Getting Started

The first step is to create some sort of container to house the navigation bars we will be making. When done, it should look like this:

Let’s get started.

First, create a basic html document to house the navigation bars.

<main>
  <nav class="twitter">Twitter</nav>
  <nav class="facebook">Facebook</nav>
  <nav class="gitHub">Github</nav>
  <nav class="medium">Medium</nav>
</main>

Pretty simple. A main section to act as the container. The navigation bars will seat within their respective containers too.

Let’s add a bit of styling.

To keep the main section in the center of the page, do this:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Also, give main section a bit of style. No one loves ugly designs. Aaargh!

main {
    min-height: 400px;
    min-width: 400px;
    background: #fff;
    padding: 40px 20px;
    border-radius: 5px;
    box-shadow: 5px 55px 50px -20px #b6b6b6; 
}

And here’s what we have:

Yeah! Now we’ve got something on the screen.

Twitter

Let’s start creating the first navigation bar, twitter!

Why Twitter first? Not Facebook? I have no legit reason. I just feel like :-) Or maybe because I haven’t used facebook in a long time!

The official Twitter navigation bar looks like this:

Let’s structure the html document for glory!

So, if I read your thoughts, this is how you think we’ll structure the document, right? Three div of some sort?

Hell no!

For simplicity, and to really take control of some flexbox goodies, I’ll use an unordered list ul. This means the nav tags will be changed to ul tags.

<ul class="twitter" role="navigation">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
 </ul>

A list item li for each element within the navigation bar. I have gone ahead to add role=navigation for accesibility.

Flesh out the basic markup, like this:

<ul class="twitter" role="navigation">
    <li><i class="fa fa-home"></i>Home</li>
    <li><i class="fa fa-bell-o"></i>Notifications</li>
    <li><i class="fa fa-envelope-o"></i>Messages</li>
    <li><i class="fa fa-twitter"></i></li>
    <li><form><input placeholder="search twitter"/><i class="fa fa-search"></i></form></li>
    <li><i class="fa fa-user-circle-o"></i></li>
    <li><button>tweet</button></li>
  </ul>

I know it looks complex, but it is a very simple document. A bunch of li tags with icons in i tags. These icons are got from font awesome. This will save us a lot of stress, and keep these examples simple.

At this point this is what you should have:

I have gone ahead to increase the width of the main section.

main {
   width: 70%
}

Now we can move on to some CSS goodness 😄

Clear the unneccessary spacing and list style from the unonderlist list:

ul {
  padding: 0;
  list-style: none;
}

Now, the twitter navigation should seat on the same line as the rest of the contents in the container. Oh, and without the ugly list dots too.

Now, let’s get Flexbox unto the scene. Aye! Been waiting for this:

.twitter {
  display: flex;
}

The sweet spot of this particular navigation comes next. How do you make sure the twitter bird (or whatever it is called) stays at the center?

Use Flexbox!

Target the list item containing the twitter bird. This is because the list li represents the flex-item

Give it a class so we can make reference to it via CSS.

<li class="twitter__bird"> ... </li>

Now make magic!

.twitter__bird {
  margin-left: auto;
  margin-right: auto
}

Believe me, that is all the Flexbox you need. 3 lines of Flexbox!

If you aren’t familiar with the flexbox auto margin trick, i wrote an article that explains everything you need to know here.

If you clean up the UI a bit, you’ll have the navigation looking good. Just like this:

If you spend a lot more on styling the navigation bar, you will have it looking better.

Here’s the bit of “extra” styling I wrote:

Facebook

Now let’s create the Facebook navigation bar. Let’s make Zuck happy.

The official navigation bar looks like this:

As always, start with a basic html document. An unordered list with a couple list elements.

Here is all the code at this point:

<ul class="facebook" role="navigation">
    <li class="facebook__brand"><i class="fa fa-facebook-official"></i></li>  
    <li class="facebook__search"><form><input placeholder="search Facebook"/><i class="fa fa-search"></i></form></li>
    <li><i class="fa fa-user-circle-o"></i></li>
    <li><i class="fa fa-bell-o"></i>Notifications</li>
    <li>Home</li>
    <li><i class="fa fa-user-circle-o"></i> Ohans</li>
    <li><i class="fa fa-caret-down"></i></li> 
</ul>

Let’s style this.

As always, It all begins with a one liner:

.facebook {
  display: flex
}

Target the facebook search form and get flexbox in action.

.facebook__search {
  margin-right: auto;
}

Haha. That my dear is all the flexbox you need!

If you spend some more time, the UI will be polished. Something like this:

Here is all the “extra” styling I wrote:

Exercise

The entire code lives here: https://codepen.io/ohansemmanuel/full/KqEeor/

If you want to practice the concepts learned, I advice you try to build the navigation bars for Medium and Github. You’ll find it interesting.

Conclusion

I have been learning Spanish! So, I’ll say “thank you very much” in spanish

— muchas gracias

Thanks for following along.

Want to become Pro?

Download my free CSS Grid cheat sheet, and also get two quality interactive Flexbox courses for free!

Get them now

The Most Popular Navigation Bars created with Flexbox was originally published in Flexbox and Grid on Medium, where people are continuing the conversation by highlighting and responding to this story.

Here’s why you will.

React took the frontend community by storm. I use ReactJS everyday, literarily.

When you get a hang of React, It becomes painless to create interactive UIs. You’re also able to design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Amazing!

What is even more interesting is the declarative APIs React offers. This is one of React’s sweet spots.

Why declarative? Declarative views make your code more predictable and easier to debug. It really does.

So, where does the CSS Grid come In?

The CSS Grid layout has been getting a lot of attention of late — and for good reason!

Just like React, it makes creating complex, 2 dimensional layouts easy. If you think creating layouts with CSS is crap or unintelligent, give the CSS Grid a try.

In one of the examples in the official css grid specification, i found this:

…an author might achieve all the sizing, placement, and alignment rules declaratively.

Yeah, it is declarative!

As websites evolved from simple documents into complex, interactive applications, web layouts became difficult to compose. The CSS Grid has come to our rescue.

My sincere advice is, get a decent CSS Grid education ASAP.

And don’t be scared of using it in production. Rachel Andrew wrote an amazing piece on that too.

If you find the CSS Grid interesting to work with, tweet me. Even if you don’t, I may still be able to help 😄

Want to become Pro?

Download my free CSS Grid cheat sheet, and also get two quality interactive Flexbox courses for free!

Get them now

If you Love ReactJS, You’ll Love the CSS Grid was originally published in Flexbox and Grid on Medium, where people are continuing the conversation by highlighting and responding to this story.

Learn the 20% you need for 80% efficiency with CSS Grid.

Introduction

This is NOT the article to learn “everything” about the css grid.

On the contrary, the target audience is people who want results quickly, and be productive while at it.

In the four parts of this article, I will show you the 20% you need for 80% efficiency with the CSS Grid layout.

Let’s dig in!

Why just 20%?

Where possible, a programmer seeks efficiency — the supposed lazy way out.

The CSS Grid layout is complex. In my opinion, more complex than Flexbox. (mehn, it took me weeks to figure out flexbox)
Not so because it is “difficult” but the CSS Grid has 18 new properties plus other concepts you’ve never heard of anywhere else in CSS.

So, do you need all of these new properties now? Right now?

No, you don’t!

Just learn the bit to get you results now. You can go ahead to learn the other properties later. This is my definition of “efficiency with the CSS Grid layout”

1. What is the CSS Grid Layout ?

If you’re new to layouts in CSS, the CSS Grid layout may seem strange to you.

Have you heard of Flexbox?

I like to view the CSS Grid layout as an older sibling (or parent) of Flexbox.

Handling Layouts in CSS have been difficult and crappy. Flexbox brought a bit of fresh air — but the CSS Grid is even better.

What we’ll Build.

You will learn to apply your 20% knowledge to building a clone of a responsive music app layout.

Part 1: The 10% you Need to Know — Basic Terminologies

Let’s take a look at the first things you absolutely have to know.

What is a Grid Container?

Every website, or application layout you make (or have seen) is essentially, boxes placed within certain defined boundaries.

In very simple terms, a grid is just “lines”. Horizontal and vertical lines that define the placement of other design elements.

You’ll be familiar with this if you use design software such as adobe photoshop or sketch.

In the context of the CSS Grid layout, A Grid container is the parent that contains all the items in the grid. The Grid container defines the initial placement of the grid lines, both vertical and horizontal.

What is a Grid Line?

Assume for a bit that you have a fully laid out grid like this:

The layout comprises a grid container with a number of perfectly laid out grid items (children elements within the grid)

Grid lines are the horizontal and vertical lines that divide the grid.

What is a Grid Cell?

A Grid cell is the smallest unit of area in a grid layout. It is any space bounded by four grid lines.

Grid Area

A grid area may be as small as the area contained within a grid cell (shown above). It may also be as large as all the cells within the grid.

In the image below, the area covered by the four cells is a grid area.

What is a Grid Track

I don’t like very technical definitions. So, a grid track may be seen as a fancy name for columns and (or) rows. It is the space between any two grid lines.

The image below show example grid tracks.

So, we’ve got the first part sorted out.

Part 2: The “Other” 10% you Need to Know — CSS Grid, Baby steps.

Now that you understand the basic terminologies, like an adventurous kid, let’s get kicking!

How do you Define a Grid?

Just like Flexbox, everything begins with a one-liner. display: grid or display:inline-grid for an inline version.

For example, to make a certain div a grid container, do this:

div {
  display: grid;
}

How do You Create Columns and Rows?

A grid without columns and rows is kinda pointless. To create columns and rows within a grid container, you use these two new css properties: grid-template-columns and grid-template-rows.

So how do you use these? Pretty simple.

grid-template-columns defines the placement of the columns. grid-template-rows defines the placement of the rows.

You pass in length values into these properties, and they create row and column tracks within the grid container.

See an example:

grid-template-columns: 100px 200px 300px

This will create 3 new columns within the grid container. The first with a length of 100px, the other, 200px and the last, 300px.

grid-template-rows: 100px 200px 300px

This will create 3 new rows within the grid container. The extents are shown below

Now put these together, and you get a full grid — with rows and column defined.

grid-template-columns: 100px 200px 300px
grid-template-rows: 100px 200px 300px

Part 3: Time to Code — CSS Grid, Hands-on

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

For speedy development, I would be using Codepen. Spin up a new project, and let’s get cracking.

How to Create the Basic Grid Setup for Catty Music

I believe you have a basic codepen project up and running now.

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.

Now style the document.

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

This will kick off the grid formatting context by making the body a grid-container

Now we can go on to define the rows and columns structure within the grid.

How to create the Rows and Columns for Catty Music

Creating the rows and columns is pretty easy.

The final design we are gunning for is this:

However, the initial grid setup we need is a grid of 2 rows and 2 columns.

Here are a few things to note about this Grid setup

Columns:

1. The first column must have a fixed width — say, 50px
2. The second column must fill the remaining width in the grid.

Rows:

3. The second row must have a fixed height — say, 100px

4. The first row must also fill the remaining height within the grid.

The lay-man’s solution.

If you’re NOT very experienced with CSS, you’re likely to write this:

body {
   ...   
   grid-template-rows: 100% 100px;
   grid-template-columns: 50px 100%;
}

The problem with this is that you have accidentally created a grid whose width and height is a total of 100% + 50px / 100% + 100px

We want a total width and height of exactly 100% So this approach is wrong.

The “smart ” person’s solution.

If you’ve got some experience with CSS under your belt, then you’re likely to do something much more smarter. Like this:

body {
   ...
   grid-template-rows: calc(100% - 100px) 100px;
   grid-template-columns: 50px calc(100%-50px)

This is pretty smart. But it’s got one problem — it isn’t very maintainable.

For example, If for some reasons you have to change any of the the fixed widths, then you must always change the calc definition.

The efficient Solution

Luckily, CSS Grid has a new unit that solves our problem elegantly. The fractional unit (fr)

The fractional unit solves the problem of automatically distributing space.

If you have three grid columns aligned as shown below, the fractional unit will automatically distribute the space equally.

If for some reason you add more elements — no worries. The fr unit will equally redistribute the space .

Finally, if you have a fixed width element, then you can take up the remaining space with the fr unit.

Here’s what I mean:

body {
   ...
   grid-template-rows: 1fr 100px;
   grid-template-columns: 50px 1fr;

And that is it — done!

If you’re still confused with fr unit, please check out, the CSS Fractional Unit (Fr) In Approachable, plain Language. It only takes 3 minutes.

Naming and Positioning Items by Grid Areas

We explicitly created the grid system. Now, let’s put it to use.

The goal of this section is to learn to position grid items using grid areas.

If you recall from an earlier section, a grid area is any area bounded by 4 grid lines.

How do you start using grid areas?

The logical place to begin is naming grid areas.

Let me explain that.

Consider the code block below:

<div class="aside"></div>

<div class="main"></div>

<div class="footer"></div>

3 divs — simple. By the way, It is semantically better to use aside main and footer tags. I’ll just keep things simple.

Now see this:

.main {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

.aside {
  grid-area: sidebar;
}

What is happening there?

If you write a bit of Javascript, or any programming language, then the concepts of variables isn’t new to you.

In Javascript, we could say:

var gridArea = "content"

What is done above is, save the string content into the variable gridArea

What the CSS declarations above does is quite similar.

Every grid item can be assigned to an area within the grid container. Read that again.

Every grid item can be assigned to an area within the grid container

However, before doing that, it is imperative to attach the grid items to an area name. Like you assign variables in Javascript — sort of.

.main {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

.aside {
  grid-area: sidebar;
}

The code block above says, let the .main class have an area name of content. Let the .footer class have an area name of footer. Finally, let the aside class have a grid name of sidebar

Now the grid items have all been assigned area names.

In programming, variables are set to be used elsewhere. Now let’s make use of the grid area names.

Grid area placement

A young man has a well baked cake. He has 3 children asking to give them some portions. Ideally, who shares the cake?

The young man!

The young man cuts out the areas and gives them to his children.

Here’s why I told that sweet story.

Like the cake, the entire grid area is owned by who?

The grid container!

Like the young man, the grid container has 3 children too .aside .main and .footer Now the grid container gets to choose how the entire area portions are shared.

One more thing.

Because the children all have names, the young man may say, “hey Brian, here’s your portion”, or “hey Emma, have this”

It is easy to identify who owns what portion of the cake, by assigning the portions to a named individual. I have no cure for you if you live in a country where people go without names 😁

The grid items all have names! We did so using the grid-area property.

Now, let’s share the cake!

The grid-template-areas property

Now the grid container must share the “cake”. Assign what area portions goes to who.

There are many ways to do what I am about to explain to you, but the grid-template-areas property is the easiest to reason about. It is the bit you need to know for efficiency.

How does the grid-template-areas property work?

Take a look at the code below:

body {
      grid-template-areas: "sidebar  content"
                           "footer   footer";
  }

😳 what the heck is that ?

That my dear, is the grid-template-areas property in action. There’s no need to get overwhelmed. In this section, I will explain how it works — in clear terms.

The grid-template-areas property (what a long property name) provides a very visual structure of the grid.

Take a look at the code again:

body {
      ...
      grid-template-areas: "sidebar  content"
                           "footer   footer";
  }

Note that the entries in the property value are the names of the grid items!

sidebar content and footer refer to the names of the grid items. The declaration above has succesfully shared the area with respect to the names of the grid items — brilliant!

The image above will help you understand how the area portions have been split.

The footer takes the entire bottom area. The sidebar and content take first and second top areas respectively.

Awesome!

At this point here’s what we have:

body {
      display: grid;
      grid-template-columns: 40px 1fr;
      grid-template-rows: 1fr 90px;
      grid-template-areas: "sidebar  content"
                           "footer  footer";
  }

The result of that is this:

I have added colors for visual aid. The red section represents the footer, the other two sections, the .main section and .sidebar.

Let’s Get Responsive — Redefining Grid Areas with Media Queries

The Grids areas you create within the parent grid container are not set in stone. The grid areas can be changed based off of the screen size of the user’s device.

The Image below shows what we aim to achieve on mobile displays.

For our specific use-case we will do some refactoring for a mobile first approach.

Mobile first is simply making your default styles those for mobile devices. Then you may go ahead to make changes for larger displays via media queries.

Tweak the current code you have now. Wrap the grid defining bit in a media query.

Like this:

@media only screen and (min-width: 600px) {
    body {
        grid-template-columns: 120px 1fr;
        grid-template-areas: "sidebar  content"
                             "footer   footer";
         }
}

You should leave the defaults excluded from the media query

body {
    display: grid;
    grid-template-rows: 1fr 50px;
}

Why do I have grid-template-rows: 1fr 50px excluded from the media query?

This is because both mobile and desktop screens will have the same row definition. 2 rows.

However, on desktop devices, there’s a sidebar. The sidebar accounts for the 120px in the grid-template-columns definition. Howbeit, the sidebar is non-existent on mobile devices.

Thus, we will redefine the grid-template-column declaration for mobile.

Now for mobile devices, we will leave this as the default styling. i.e not wrapped in any media query.

body {
   grid-template-areas: "content"
                        "footer" 

Pretty simple?

Let me explain.

The default flow (direction) of a Grid

The code block for mobile displays is easy.

body {
   grid-template-areas: "content"
                        "footer"

However, note that there was no need to specify grid-template-columns

By default, a grid will align it’s children along rows.

So, the declaration above will align content along a row, and footer along another.

Below is the result of that — the sidebar hidden on mobile.

With the initial hurdle of understanding how grids work, and setting up a responsive grid, let’s finish up the app layout!

Placing Content within the Grid.

At the end of this section, we would have the Music app layout completed. The focus being, how to place and align content within grids.

Let’s get started.

1. The Sidebar

This looks like the easiest to start with. Let’s go for it.

The sidebar consists of 8 icons equally spaced out vertically accross the entire length of the sidebar.

Insert the icons, like this:

<div class="aside">
      <i class="fa fa-bars"></i>
      <i class="fa fa-home"></i>
      <i class="fa fa-search"></i>
      <i class="fa fa-volume-up"></i>
      <i class="fa fa-user"></i>
      <i class="fa fa-spotify"></i>
      <i class="fa fa-cog"></i>
      <i class="fa fa-soundcloud"></i>
</div>

Below is the result of that:

Also, hide the icons when on mobile. Show them when the app is visited on a larger screen. This is the mobile first approach.

.aside i {
  display: none;
}

@media only screen and (min-width:600px) {
  .aside i {
    display: block;
  }
}

The icons are displayed, but poorly aligned.

Aligning the icons

The i tags are inline elements — which explains why every 2 icons sit on one line.

Let’s fix the arrangement.

Grid items can be grids themselves. Why not

Step 1: Make the Sidebar a Grid Container

This will give access to using the grid’s alignment features.

Since the sidebar is only seen on larger screens, do not forget to wrap this in the media query.

@media only screen and (min-width:600px) {

  .aside {
     display: grid; 
  }
  
  .aside i {
    border: 1px solid red;
  }
}

I have gone ahead to add borders to each icon — so they are visually distinguishable.

What’s happening there?

We have NOT set up any rows or columns within the sidebar. But we have the icons laid out fairly well. The grid auto placement algorithm has set in.

This is got to do with the default placement of items in a grid — along a row. Also, the grid items are arranged to take up the space of the grid container, as needed.

Here comes the sweet sauce.

A grid may align it’s items using any of justify-items or align-items.

justify-items will align the items along the row axis. In most cases, row is pretty much synonymous with the horizontal direction.

align-items will align the items along the column axis. In most cases, column is also synonymous with the vertical direction.

Apply this to the sidebar, and we have perfectly laid out icons.

.aside {
     ...
     justify-items: center;
     align-items: center;
  }

Still confused, watch the changes in the sidebar items as I type.

Now we have perfectly laid out icons within the sidebar.

A few other values justify-items and align-items can take include:

• stretch
• start
• end
• center

If you’ve worked with Flexbox, these should be familiar.

We’ll proceed to placing more content into the current design.

Target the main section, the dark blue section in the image above. Place two div within:

<div class="main">
  <div class="main__header"></div> 
  <div class="main__body"></div>
</div>

NB:

1. main__header will house the music art and playbacks:

2. main__body will house the details:

In this section we will focus on main__header

First off, add the required html

<div class="main__header">
      <div class="img">
          <img src="http://bit.ly/2sc2NJd"/>
      </div> 
      <section class="details"> 
          <div>
              <p>CattyBoard Top 100 Single Charts (11.06.36)</p>
              <p class="sm--hide">Unknown Artist</p>
              <p class="sm--hide">2016 . Charts . 100 songs</p>
          </div>
          <div> 
               <i class="fa fa-play"> &nbsp;Play all</i>
               <i class="fa fa-plus"> &nbsp;Add to</i>
               <i class="fa fa-ellipsis-h">&nbsp;&nbsp;More</i>
          </div>
      </section>
</div>

Note the way the document is structured.

main__header has two direct children. A div that contains an image, and a section that contains album details, .details

The result of the addition above is this rather ugly image:

Let’s make this pretty.

What we need is a grid that aligns its children appropriately.

Let’s make use of your new knowledge of grid areas.

First step, define the grid areas:

.main__header > .img {
  grid-area: img;
}
.main__header > .details {
  grid-area: dtls;
}

The div containing the image has been named img The section containing the album details has been named dtls

Now, define the grid itself:

.main__header {
  display: grid;
  grid-template-areas: "img"
                       "dtls"; 
}

.main__header sets a grid formatting context. The areas have also been aligned to stack vertically on another. imgfirst, then dtls

This is because we are working with a mobile first approach. Good.

At this point, nothing much’s changed.

This is NOT the view we want on mobile.

For mobile screens, the items should be aligned to the center. Fix that.

@media screen and (max-width: 600px) {
  .main__header {
    justify-items: center;
  } 
}

Now the grid items will be positioned to the center of the grid (along the row)

Make the texts in .detailsalign to the center:

@media screen and (max-width: 600px) {
  .main__header > .details {
    text-align: center;
  }  
}

Pretty close to the end goal. Just a few more tweaks.

The paragraphs with the texts, unknown artist, and 2016 . Charts. 100 songs. should be hidden on mobile. The image should be smaller too.

@media screen and (max-width: 600px) {
  .sm--hide {
    display: none;
  } 
  .img > img {
    width: 150px
  }
}

Every class .sm--hide will be hidden on mobile. Just add this class to the desired element.

Here’s how:

<p class="sm--hide">Unknown Artist</p>
<p class="sm--hide">2016 . Charts . 100 songs</p>

And we have this:

Having sorted out the view on mobile, let’s fix that for larger screens.

Back to the parent grid.

For larger screens, we need a 2 column grid. The areas should be split like this:

@media only screen and (min-width:600px) {
   .main__header {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "img dtls"
  } 
}

I’m sure you understand what’s going on there.

The grid has been redefined to have two columns. One fixed at 250px and the other to fill the remaining space.

Our current progress lives here.

Part 4: Making CSS Grid work with Flexbox

In this part, you’ll learn to make Flexbox and Grid work together — peacefully.

These two technologies have changed how layouts in CSS are treated. It is efficient ot use both technologies where possible.

Let’s delve in.

For the section housing the music details, we will use flexbox.

How do you know where to use Flexbox?

As a general rule of thumb, it is appropriate to use Grid to layout the overall page layout, and Flexbox for inner UI components.

A grid item can be a flex container. A flex item can also be a grid container. The latter is frequently used though.

I assume you have a good grasp of flexbox.

As always, begin with the html

Below is a div, with a list of songs. The list of songs have paragraphs containing the name of the song, artiste, duration of the song and “catty cloud sync”.

<div class="main__body">
        <div>
              <p>1. One Dance</p>
              <p>Crake feat CatKid &amp; Cyla</p>
              <p>2:54</p>
              <p><span>CATTY CLOUD SYNC</span></p>
        </div>
        <div>
              <p>2. Panda</p>
              <p>Cattee</p>
              <p>4:06</p>
              <p><span>CATTY CLOUD SYNC</span></p>
        </div>
        <div>
              <p>3. Can't Stop the Feeling!</p>
              <p>Catin Cimberlake</p>
              <p>3:56</p>
              <p><span>CATTY CLOUD SYNC</span></p>
         </div>
         <div>
              <p>4. Work From Home</p>
              <p>Cat Harmony feat Colla</p>
              <p>3:34</p>
              <p><span>CATTY CLOUD SYNC</span></p>
         </div>
    </div>

Here’s what we’ve got:

main__body is a grid item. We could make it a flex container if that was useful.

For our use case, each direct div child of main__body needs to be flex container. This is the divthat contains the name of the song, artiste, duration of the song and “catty cloud sync”.

.main__body > div {
  display:flex;
}

Now split the width amongst the child elements:

.main__body > div p{
  flex: 0 0 25%;
}

You’ll agree with me that at this point, the essentials of the layout is done. Yes, ✅

However, I have gone ahead to make a few cosmetic changes.

You may view the result of that here

You’ll notice that I have left the footer blank. That’s supposed to be an exercise for you. My advice is to use flexbox. This will strengthen your understanding of getting both technologies to work together. Go ahead and make the grid item, footer a flex container.

If you need some cues, check out catty music built completely with flexbox.

With just a few grid properties, you have built a real world layout. That’s pretty impressive. You’ve also learned the invaluable skill of making the CSS Grid layout work with Flexbox too.

Want to become Pro?

Download my free CSS Grid cheat sheet, and also get two quality interactive Flexbox courses for free!

Get them now

How to Efficiently Master the CSS Grid — in a Jiffy was originally published in Flexbox and Grid on Medium, where people are continuing the conversation by highlighting and responding to this story.

Introduction

The fractional units(fr) is a new form of unit measurement in CSS — largely associated with the CSS Grid.

If you are not familiar with the CSS Grid, be sure to check out my introductory article.

Story time

Let’s pretend to forget about CSS Grid or fractional units for a bit.

Good.

So it’s holidays and you have a big, moist and fluffy cake.

But the challenge is, you have to share the cake into 5 equal parts!

So you pick up the knife and get to work…

In 5 minutes, you have the most perfect cut. 5 equal parts!

Good Job!

Just when you thought you had done an amazing job, one more neighbour comes from no where and insists on having a cake too 😡 — an equal portion of cake.

Really?

What do you do?

Do you collect all the shared cakes and magically bind them together for another equal cut?

I ain’t doing that…

Application

This is the problem we have lived with for a long time. Like the big fluffy cake, we have a 100% width across any screen size.

Consider the markup below:

<section>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</section>

We have a container section which houses 5 divs

To share the 100% width accordingly and give the divs equal widths, you’d specify an individual width of 20%

Why?

Because we have 5 divs. 100% divided by 5 gives 20%

“Now one more neighbour comes from no where and insists on having a cake too…”

If one more div is added within the section, you have to recalculate and specify the width again!

100% divided by 6 … the math is left to you😆

This is one problem the fractional unit takes away!

The Fractional unit

With the fractional unit(fr) you don’t need to recalculate — at all.

If you specify a width of 1fr , you can go on to add as many child elements as possible and it will be taken care of. The widths will be equally shared accross all child elements.

You are NOT bound to just “ones” or “whole numbers”. You may have values like: 1.5fr 3fr 4.5fr

In this case, the total fraction is 1.5fr + 3fr + 4.5fr = 9fr

If the parent container has a width of 900px…

The first, (1.5fr) will have a width of 1.5fr/9fr * 900px. This yields 150px.

The second, (3fr) will have a width of 3fr/9fr * 900px. This yields 300px.

The third, (3fr) will have a width of 4.5fr/9fr * 900px. This yields 450px.

With fractional units, a lot of flexibility is introduced. Make sure to enjoy the delight it brings to laying out contents with the CSS Grid layout.

👉 Be sure to check out the follow up article, What You Didn’t know about the CSS Fractional Unit

Want to become Pro?

Download my free CSS Grid cheat sheet, and also get two quality interactive Flexbox courses for free!

Get them now

The CSS Fractional Unit (Fr) In Approachable, plain Language. was originally published in Flexbox and Grid on Medium, where people are continuing the conversation by highlighting and responding to this story.

Let’s get started.

1. What is a Grid Container?

A Grid container is the container for which display: grid is set. In technical terms, a grid container is the container for which a grid formatting context is set.

Grid formatting context is a fancy way to say, “set up a container whose formatting is based on the rules of the Grid model”

Example

Consider the markup below:

p {
  display: grid;
}

The paragraph element above is a grid container. It sets a grid formatting context via display: grid

In the example above, the pelement has been set to be formatted based on the Grid model.

2. What is a Grid Item?

In 1 above, we looked at grid-containers.

Assume that the paragraph in 1 had a markup as follows:

<p>
  <div></div>
  <div></div>
</p>

With p been a grid container, the div elements are automatically grid items.

Technically, the children elements of a grid-container are called grid-items. Emphasis on “children”

Strictly speaking, grid items are not restricted to only elements. e.g. the two div elements above. Anonymous bits of texts may also be grid items.

Example

Consider the markup below:

<p>
  <div></div>
  I am a text
  <div></div>
</p>

Notice how I am a text is NOT in a separate div

In the markup above, both div items are grid-items , AND so is I am text

In conclusion, the markup has 3 grid items — the 2 div elements and the text, I am a text.

3. What is a Grid Line?

Assume for a bit that we have a fully laid out grid layout like this:

The layout comprises a grid container with a number of perfectly laid out grid items.

The grid items are represented by the little square boxes within the outer container.

Now, what’s a grid line?

A grid line is a little difficult to describe.

Take a look at the reference image above. Every straight line you see there is essentially a grid line.

4. What is a Grid Cell?

Again, take a look at the reference image above.

A Grid cell is the smallest unit of area in a grid layout. The small boxes of grid items may be referred to as grid cells.

More appropriately, a grid cell is any space bounded by four grid lines.

See the example grid cell below:

5. What is a Grid Area?

A grid area is pretty easy to understand.

Remember I said the grid cell is the smallest unit of a grid area? Yes, that is right!

A grid area may be as small as the area contained within a grid cell, or as large as all the cells within the grid.

In the image below, the area covered by the four cells is also a grid area.

Conclusion

It’s easy to take fundamental concepts like the ones shared in this article for granted. But like a wise man once said, “the master of the basics is the true master of the skill”.

Want to become Pro?

Download my free CSS Grid cheat sheet, and also get two quality interactive Flexbox courses for free!

Get them now

The CSS Grid Terminologies you Should Know was originally published in Flexbox and Grid on Medium, where people are continuing the conversation by highlighting and responding to this story.

The road to learning by precept is long, by example short and effective — Lucius Seneca

This article is example focused, and the problem we’ll be solving is pretty standard.

How do you create a section that scrolls horizontally — with great support on browsers, mobile inclusive?

Flexbox! Yeah, that’s the short answer.

Let’s flesh that out a bit.

Basic Code Setup

Consider the markup below.

It’s essentially a section with a couple div elements as children.

Code Styles

Because no one loves ugly designs, let’s have some very basic styling:

The first few lines, 1 -5 explicitly sets the width and height of the root elements to 100%

Line 8 gives the body a background-color, line 9 takes away margin around the body, while lines 10 to 12 ensures that the direct child element of body is positioned exactly at the center — vertically and horizontally.

To see this in effect, give the child element, <section class=”card"> some styling:

Line 2 is quite obvious. Line 3 ensures that the section takes 100% of it’s container’s width by default. Line 4 makes sure that the height of the section never goes below 200px

Now everything should look like this at this point:

Now we will put the card--content “divs ” within the card section to good use.

Let’s have some very simple styles again.

First off, make card a flex-container:

.card {display: flex}

Then style .card--content as follows:

Line 3 ensures that the width of each card is never less than 200px , everything else is pretty simple.

Here’s the result of that:

As you may have noticed, the entire page scrolls. This is because there are more elements than can be fit into the card section.

Let’s specifically tell the browser to only scroll the card section.

To do that, add this:

.card {
  overflow-x: auto;
}

And we have a scrollable section:

Good!

Hiding the Scrollbar

For UX reasons you may want to hide the scrollbar, and still have a scrollable section.

There’s an easy way out — for webkit browsers at least.

.card::-webkit-scrollbar {
  display: none;
}

This will hide the scrollbars, which is arguably more beautiful.

Applications

I have used empty boxes to illustrate the point here. However, there could be a lot of application for this simple technique — a technique very valuable in mobile apps where you don’t have a lot of viewing space

Here are a couple examples:

(i) You could have a bunch of Images in a horizontal section — your version of instangram

(ii) You could have just a bunch of texts, if that’s useful for you.

To be honest, the possibilities are endless — all at your service.

Want to become Pro?

Download my free CSS Grid cheat sheet, and also get two quality interactive Flexbox courses for free!

Get them now

How to create horizontally scrollable sections with Flexbox was originally published in Flexbox and Grid on Medium, where people are continuing the conversation by highlighting and responding to this story.