CSSLayout

How Does CSS Grid grid-template-areas Work?

`grid-template-areas` lets you name regions of a CSS Grid layout as a visual ASCII-art string on the container, then assign each child to one of those named re…

What Do justify-content, align-items, and align-self Do in Flexbox?

`justify-content` aligns flex items along the main axis (the flex-direction), `align-items` aligns items along the cross axis for the whole container, and `ali…

What Are CSS Container Queries and How Do They Differ from Media Queries?

Container queries let an element style itself based on the size of its nearest containing ancestor rather than the size of the entire viewport, using `containe…

What Are CSS Viewport Units (vh, vw, dvh, svh, lvh)?

CSS viewport units size elements relative to the browser viewport — vw and vh are percentages of the initial viewport width/height, while the newer dvh, svh, a…