Author: Daniel

Even dough I don't believe the CSS grid was designed especially for stacking elements one on top of each other this can be achieved easily with a combination of grid-area and z-index.

Let's say we want to build the below widget.

This can be described by the following HTML structure:

<div class="card">
    <div class="top">A cat named</div>
    <div class="bottom">TOM</div>
    <img src="http://examples.js-craft.io/tom.png" alt="TOM">
</div> 

If we place it in grid layout of 1 column - 3 rows then we can easily say something like:

.card { display: grid; }
img {  grid-area: 1 / 1 / 4 / 2;  }
.top { grid-area: 1 / 1 / 2 / 2; }
.bottom { grid-area: 3 / 1 / 4 / 2; }
.card div { z-index: 2; }

That's pretty much all that we need to stack elements on top of each other with the CSS grid. Just don't forget to set the z-index prop to the elements you want on top and that the grid-column is using line numbers to place items. Therefore that's the reason why we have lines like img { grid-area: 1 / 1 / 4 / 2; } even if we have just 1 column and 3 rows.

Below you have the full working example:

See the Pen
tom-cat by JS Craft (@js-craft)
on CodePen.

There were defining moments in our evolution as a species. Like the moments when we discovered fire, or when we discovered electricity. Exactly like this, we have some breakthrough moments when we learn something new.

In its essence CSS is simple. We have selectors and properties that we combine to style our HTML documents.

However, there are still moments when I've felt like I have discovered that missing piece of the puzzle that was explaining why things were not behaving as intended.

So, my main breakthrough moments:

1. The CSS box model: In the beginning, it was not clear to me that if you have an element with width: 100px and border: 5px solid that element will need in total 110px of space. Things like the border, margin, and padding are not included in the width of an element. And we can change this with the box-sizing property .

2. How CSS deals with conflicting rules: What if we have:

html div p {color: blue}
body p {color: red}

What color our paragraphs will be? The two main principles that are used by CSS to decide the winning rule are specificity and cascading. Of course initially I was getting frustrated and was using !important all over the place. But getting a grip on how these principles work made writing CSS a more enjoyable experience.

3. Using CSS grid and flexbox: layout is hard in CSS. Maybe the most complicated subject. However, with the addition of CSS grid and flexbox things got way better. What took before a lot of math and "brainpower" become simpler with these two. You can see here also a way on how to decide when to use the CSS grid and when to use flexbox.

Of course, every learning experience is unique, but for me, these were the things I wished somebody told me when I've started making stuff with CSS.

Cheers and happy learning!

Let's say we want to build the example below:

Defining the grid can be easily done with the repeat function:

.container {
    display: grid;
    grid-template-columns: repeat(3, 75px);
    grid-template-rows: repeat(3, 75px);
    grid-gap: 5px;
}

All the elements (besides the green one) take only one cell, so placing them it's quite straight forward with something like:

.red {
    grid-row: 3;
    grid-column: 1;
}

Now, the tricky part is with the .green element. To make it span across multiple cells we have a few ways of doing it. We can use grid-row-start and end or we can use the span keyword.

For me, the most intuitive approach is by using the grid-area property. How it works is by giving it the coordinates for the top-left cell and the ending bottom-right cell.

The element will span all the way from the top-left to the bottom right. However, keep in mind that the actual bottom-right cell is not included so we will have +1 for the ending coordinates.

So, in our case if we want the green cell to go from cell 1-1 to cell 2-2 we will have:

.green {
    grid-area: 1 / 1 / 3 / 3;
}

The full documentation about it property can be found here.

You can see the full working codepen below.

See the Pen
grid-area by JS Craft (@js-craft)
on CodePen.

EXTRA TIP: if you add one element in a CSS grid but you don't specify where you want that element to be placed the grid will place it in the first available cell that is found by traversing top-left to bottom-right. The next one in the next available cell and so on. This is the reason why we did not need to manually place the blocks that take just 1 cell (.red, .blue etc).

In many circumstances, we will use something a combination of the top - bottom - left - right properties to set or adjust the position of an element on the page.

I have found myself quite often waiting to have a shorthand for these properties. In the end, is we can write something like this:

margin: 10px 20px 5px 15px;
/* sets the margin to:
maring-top: 10px;
maring-right: 20px;
maring-bottom: 5px;
maring-left: 15px;
*/

Then why I can't do the same for the coordinates props?

Well, this is exactly what inset is here for. The CSS inset It is a shorthand that corresponds to the top, right, bottom, and/or left properties. For example:

inset: 10px;
 /* is the same as:
top: 10px;
right: 0; 
bottom: 0; 
left: 0;` */
*/ 

inset: 2.4em 3em 3em 3em;
 /* is the same as:
top: 2.4em ;
right: 3em; 
bottom: 3em; 
left: 3em;` */ 

inset: 4px 8px; 
 /* is the same as:
top: 4px ;
right: 8px; 
bottom: 8px; 
left: 8px;` */ 

You can see the full docs here.

It is a part of the CSS Logical Properties, together with margin-block and margin-inline.

Keep in mind though that this is still work in progress. The support for it is not great yet but it will improve in the future. For not it is supported in Firefox only.

A calendar layout seems a perfect candidate to be using the CSS grid. Let's see how we can accomplish this with the minimum amount of code.

The final example will look like this.

And our HTML structure will be the following:

<div class="days-of-week-container">
      <div>Mo</div>
      <!-- the list continues -->
      <div>Su</div>
</div>
<div class="calendar-container">
  <div>1</div>
  <!-- the list continues -->
  <div>31</div>
</div>

In normal circumstances, we will not have to write by hand all the <div>1 ... 31</div> stuff. It will be generated by Javascript, but for the sake of the example, we will just use basic HTML and CSS.

We have two main sections, the days-of-week-container and the calendar-container. Both of them will be grids, with the right text-align:

.days-of-week-container,
.calendar-container {
  display: grid;
  text-align: right;
}

Now, if we take a look at our grid it's pretty clear that we will have 7 columns. It's a bit, troublesome to write by hand something like:

grid-template-columns: 30px 30px 30px 30px 30px 30px 30px;

So we can use just a simple repeat to set up our columns:

grid-template-columns: repeat(7, 30px);

Now, given the auto-placement of the elements in the cells, the days of the week and the actual calendar will be placed first to last in the 7 column layout.

See the Pen
Calendar by JS Craft (@js-craft)
on CodePen.

But, what if the month does not start on Monday? We can just use the grid-column to move the placement of the first day in the calendar, and the auto-placement will take care of the rest.

.calendar-container div:first-child {
  grid-column: 7;
}

See the Pen
Calendar with starting date by JS Craft (@js-craft)
on CodePen.

So, voila, another example of how much we can get done with CSS grid and just a few lines of code.

Today I want to share with you guys two sites I've have found recently. Both of them quite useful for our CSS endeavors.

The first one is the CSS grid generator made by Sarah Drasner. Define a grid, select the areas where you want the content to be, how big it should be, the spacing and the generator will give you the code to make it happen. Good to use when you want to learn or make some fast sketches using CSS grid.

And the second is the Selectors Explained tool. It's super cool. You give it a selector and it will show a nice "plain English explanation" for what that selector means alongside its CSS specificity score.

For example, if you give it:

#main-from > input[type=text] 

It will give back: "An input element with an attribute type whose value is text … directly within the element with id main-from". And with a specificity score of 1.1.1.

Pretty neat, no !? Btw, here you can find also 2 games for learning CSS grid and Felxbox.