Checkout my Getting Started with React video course on Skillshare. It is 100% free.

How display inline-grid works in CSS and how is different from display grid

When we think about the display of an element in CSS we can see it from 2 points of view: how it relates to its children and how it relates to its siblings.

Let's say we want to build this small component:

The HTML would be like this:

<div class="box is-inline-grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

To get that 2 x 2 layout we can make it a grid:

.box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 4px;
}

Now if we want to put this grid in the same line with time inline elements, like some spans, we will not be able do to that. We will get something like this:

We get the above layout because if we set the element to display: grid we are saying something similar to "set this element to be a grid for its children, and to be a block to its siblings". Being a block to its siblings means that it will break the flow of the inline elements.

To make it so that it stays on the same line as the spans we will have to use the display: inline-grid.

This will say "set this element to be a grid for its children, but to be inline to its siblings" .

So the difference between display: grid and display: inline-grid is how they behave in relationship with their siblings. Both will serve as a grid container for their direct children.

Check out the full codepen for this example:

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

By the way, the display inline-flex is the same for display flex.

Going back to the root level with @at-root in SCSS

The @at-root takes the selector from its current nesting scope and moves that selector to the root of the file. This means that the following SCSS code:

.user {
    color: blue;
    @at-root .info {
        color: red;
    }
}

Will be compiled to:

.user { color: blue; }
.info { color: red; }
/* insead of :
.user { color: blue; }
.user .info { color: red; } */

It is useful as it allows us to group CSS rules but not to increase the specificity of these rules, making them easier to override if needed.

And this is true even in the case of multiple nesting. It will move the @at-root declaration at the top no matter how deep the nesting goes:

.container {
    .item {
        @at-root .title {
            color: red;
        }
    }
}
/* will be compiled just to .title { color: red; } */

One small this to note is using the @at-root with media queries. We can use @at-root (without: media) and @at-root (with: media) to decide if we want to still keep the media query or not.

@media (max-width: 600px) {
   .user {
      height: 8px;
      @at-root (without: media) {
            // rules here
      }
   }
}

How to make any HTML element resizable with the CSS resize property

Any element can be made resizable if we apply the folowing CSS to it:

resize: both;

Please note that it will work only if the overflow property is set to something other than visible. We can even combine the resize with something like min-width or max-with to set specific bonds for it. Also, any attributes like offsetWidth will be updated to the new sizes.

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

The CSS revert value – setting the default value for CSS properties

Have you ever been in the position to search for what CSS property has inherited from where so that you know how to revert it to its default stage?

Well, look no further! The revert CSS value does exactly this. It reverts a specific CSS property to its default user-agent style sheet value (meaning that it makes it as if you would not have applied any CSS at all to it).

Considering the following code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="default">Fusce sit amet luctus mi.</p>
p {
    background-color: darkblue;
    color: orange;
}

You can apply it so that you will reset just one specific property:

p.default {
    background-color: revert;
}

Or you can reset all the properties in conjunction with all:

p.default {
    background-color: revert;
}

Happy reverting, folks! 😀

Building a layout with CSS Grid video series: Part 2 – Defining the named template areas

In the second part of this screencast series, we will see how we can use the grid-template-areas to define the general cell tiles of the layout. Also, by using the grid-area we will place each component in its corresponding grid cell.

Stay tuned as the next week I will publish two new episodes from this series.

Also, you can check the other screencast series about Build a game with React part 1 and my full video course about React on Skillshare.

Building a layout with CSS Grid video series: Part 1 – Introduction

Hey guys! After all of the recent articles about CSS grid, I am happy to announce that I've started to recoded a new screencast series. It will be a 6 part video course about making a responsive homepage layout with CSS grid and named template areas.

Below is the first part, describing the full example and the starting files. Drop me an email at daniel at js-craft.io with your feedback 🙂 Expect 1-2 videos per week.

Also, you can check the other screencast series about Build a game with React part 1 and my full video course about React on Skillshare.

Making CSS responsive with the clamp, min and max functions

The clamp, min, max functions are a trio of CSS functions that can make our life easier when working with a responsive design. They make sure the increase or decrease in size never goes beyond some limits.

Let's start with the clamp function. It takes three parameters:
-> the minimal value
-> the preferred size
-> the maximum size

So, for example, if we say:

.my-element {
    width: clamp(300px, 50%, 800px)
}

Then .my-element will try to be always 50% of its parent's width, but will never go under 300px or more that 800px.

It can be very useful when working with font sizes. In a responsive context, it's great to be able to use the viewport units with font sizes. This will mean that when our screen is getting smaller also our font size will decrease. But the font can become too small to read on small screens.

So the clamp function to the rescue! We use a statement like the one below to make sure our font size will always be readable and also responsive.

.my-resposive-readable-text {
    font-size: clamp(12px, 3vw, 24px);
}

Alongside with clamp, we have two other complementary functions.

The CSS 'min()' function will take two parameters are will return the smaller one to be used as a size.

So, if we have:

.widget {
    width: min(20rem, 80%)
}

Then the .widget component will be the smallest of the two values from 80% of its parent or 20rem.

The max() function will behave the same, just that it will select the biggest value.

One nice thing about all of these functions is that you don’t need a calc() function to do math inside.

We can just write max(20vw - 1rem, 10% + 40px) and it will work. Just be sure to leave an empty space before and after the operator sign.

Of course, all the time when we use the min() or max() functions we will need to use different units types. Writing something like min(10%, 25%) it's nonsense as 10% will always be the smaller value.

Kevin Powel has a nice video explaining more about these functions:

Using the new two-value syntax of the display property in CSS

Changes are coming to one of the core properties in CSS: the display property. We will be able to define how our elements are behaving when relating to their children and how they relate to their siblings.

The new syntax of the display property will accept two parameters <display-outside> and <display-inside>.

For example, when we are saying display: grid we are basically saying two things:

  • this element is a grid for its children
  • and this element is a block for its siblings

So the full declaration can be display: block grid.

The same with display inline-grid. It is a grid for its children and an inline for its siblings. So with the new syntax, it will become display: inline grid.

In this Web docs Mozilla article we have the following table describing the correspondence between the old and new syntax.

Current value New value
block block flow
flow-root block flow-root
inline inline flow
inline-block inline flow-root
flex block flex
inline-flex inline flex
grid block grid
inline-grid inline grid

As a general rule if a <display-outside> value is specified but <display-inside> is omitted, the element’s inner display type defaults to flow.

So far only Firefox fully implements this new syntax but I am looking forward to more support as I think it provides a clearer description of how an element behaves.

If you want to read more and you can take a look at this great article or Rachel Andrew or the below video:

CSS Logical Properties

Create spacing that works regardless of the direction of your content or the environment of your users.

Say you want to put some space between two inline items: what do you do? Probably something like this:

.my-element {
    margin-left: 1em;
}

This approach is fine and has been for a long time with CSS, but what happens when the content direction changes? That left margin suddenly becomes problematic because it no longer matches and makes the content look awkward.

Western languages read left to right, but other languages such as Arabic, read right to left. Some languages even read top to bottom, like traditional Chinese.

Our CSS should be as flexible as possible, so instead of explicitly setting a left, right, top or bottom value to margins, we should instead be using a logical property.

Here’s that same example from the start, but with a logical property:

.my-element {
    margin-inline-start: 1em;
}

What this now does is instead of saying “add margin to the left”, it says “regardless of direction, put margin on the starting side”. If the language of the document was right to left, like Arabic, that margin would be on the right hand side.

Why is this important?

The web is global and open, so making presumptions about the users of your website is pretty dangerous.

A variety of factors come into play when someone visits your site, such as connection speed, device power and spoken language. They could also be using a translation extension. It’s our job as web developers to make our content as flexible as possible to meet user needs, regardless of what those needs are, using the powerful, flexible tools that are given to us by the web platform.

Logical properties are a perfect example of this and they have a huge browser support, so you should absolutely use them today.

Resources and further learning permalink

This is only a quick intro to logical properties, but luckily, some other fine folks from around the web have written about them in detail:

CSS Logical Properties - CSS-Tricks
CSS Logical Properties and Values - MDN
Understanding Logical Properties And Values
CSS Logical Properties - Adrian Roselli

CSS margin collapsing – what it is and why should I care

In CSS margin-collapsing refers to the fact that the margins that are next to each other are colliding… but only vertically.

Yeah, it's one of those brainfuck moments in CSS.

Let's first take two divs that are one next to each other on the horizontal axis. If we have a margin: 25px for both divs, and the width: 100px then, as expected, the required width will be 300px.

However, if we try to do the same with the divs are arranged vertically then the total needed space will be 275px, instead of the expected 300px.

And this is because the vertical margins of the elements are collapsing.

But, what if the margins are of different sizes? What if one div has margin: 25px and the other has a margin: 40px? Well, in this case just the largest of the two margins will be applied (40px in our case).

And what about negative margins? The rule will be applied when both margins are negative (vertically), but not when one margin is negative and the other is positive.

If you want to learn more take you can a look at: