In short, flexbox layout is based on a direction – either horizontal or vertical (flex-flow direction) and its purpose is to align flex items in a flex container. Compared to block which is vertically-based and inline which is horizontally-based, and they work pretty well for pages, it is also important to bring out they have a flexibility problem and cannot hold up complex applications, especially when it comes to responsive design that deals with lots of orientation changing, stretching and shrinking. So, you think flexbox solves all that? Not really. Flexbox does not deal well with the complexity of big-scale layouts. Grid does. At the end of the day, grid is two-dimensional and the flexbox is one-dimensional. We talked about that and other differences in an article about Grid vs. flexbox in CSS: how are they different and when should we use them?. However, flexbox is still an appropriate approach for small-scale layouts and parts of an application and its goal is to enable a more flexible layout, in terms of aligning and distributing space among flex items in a flex container.
…

This article will cover what are CSS selectors, why and how we use them, and we will also get to know different types of CSS in detail, and we will take a look at how they work. We’ve already covered selectors in QuerySelector multiple classes and other rules in JavaScript and CSS, so this is definitely the article you should also take a look at. And if you are interested in JavaScript, the article GetElementById vs. querySelector: Which is better and why use one over the other? is also something you should check, too.
…

In this article, we are going to learn the difference between a pseudo-class vs pseudo-element – we are going to take a look at how they are similar and what are the differences between them. For a start, pseudo-class and pseudo-element are both CSS selectors, so this is definitely something that they have in common. The basic difference, however, is, that a pseudo-class represents a virtual CSS class, while a pseudo-element represents a virtual HTML element. Let’s take a look at what this really means.
…

Both grid and flexbox – we use them for a layout – both can shrink and they can stretch, we can align and reorder elements with them. Both grid and flexbox have similarities, but most of all they have differences too and in this article, we will focus on that. We will put grid versus flexbox and we will explore how they are different (and similar) and when should we use each to find the optimal balance – the right tool for the right job.
…

This article will focus on CSS and repeat() function – we will define the function, and most of all show you how and when to use it with a help of a few examples.
…

There has been a lot of discussion for a while now about the use of subgrid, and even whether we even need it because approaches such as nested grids and display: inherit can handle some of its problems. But not all. For this reason, this article will focus on getting to know subgrid and nested grid more in detail – we will get to know what are similarities and what are the CSS subgrid vs. nested grid differences.
…

This article will focus on the minmax() function, but we will explain the min() and max() functions through the example of minmax() sizing function. So, when we work with the CSS Grid, we use the minmax() sizing function to define a size range – a minimum and maximum value for what the length is able to be – a size range that is greater than or equal to min and less than or equal to max.
…

Pixel (PX), we are sure you’ve heard of it. But what about EM, REM, or VH? What about FR? No? When working with CSS, you can specify the length or size of properties, such as width, height, margin, padding, gap, font size, and many others, using different units of measure. CSS allows you to use PX, EM, REM, %, VW, or VH, FR, and even other units. But what do these units really mean, and when and why you should choose one over another?
…

Sizing keywords represent another way we can define the size of grid items – rows and columns. Of course, as already explained in a tutorial about CSS grid items’ properties and their values you can use length values such as px, em, rem, vw and vh and fr, but you can also use different keywords, such as span, min-content, max-content, auto, fit-content, auto-fit, auto-fill and others.
…

No more tables, no more positioning, no inline-blocks, no more floats or flexbox layout tools – the CSS grid layout is here. A beautiful module that helps us create a grid-based layout system through rows and columns. And this is not all – with the grid layout the fr CSS length unit came, too, and when you work with a CSS grid, you’ll be probably using lots of fr units, too.
…