There are so many facts about CSS that we want to share with you! For example, do you know about CSS Grid Layout? We would be glad to tell you! GRID is a visual cheatsheet for CSS Grid Layout
CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that element’s children (which become Grid Items).
Properties for the Parent (Grid Container)
Defines the element as a grid container and establishes a new grid formatting context for its contents. Values:
- grid – generates a block-level grid
- inline-grid – generates an inline-level grid
Properties for the Children (Grid Items)
Determines a grid item’s location within the grid by referring to specific grid lines.
grid-row-start is the line where the item begins, and
grid-row-end is the line where the item ends.
Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like
px. In this case you can set the alignment of the grid within the grid container.
And there are many more that you can explore here.
P.S. Do you know how is better to achieve multiple font styles? The best way is to use Variable Fonts with CSS.