Esc

Introduction to CSS Layouts

In CSS, a layout is the way elements are organized and distributed within a page or section. It determines where elements are placed, how they are aligned with each other, and how they adapt to the screen size.

Our goal is to show, through simple and comparative examples, how to align elements both horizontally and vertically, how to organize different sections of a page, and in which situations each technique is best applied.

We want to help you visualize, practice, and understand the essentials to improve your designs and write CSS with greater confidence and clarity.

Before diving into block, inline-block, flex, or grid, it is essential to understand some key concepts that determine how elements are positioned and behave within a web page.

Box Model

Every element in HTML is a box. This model defines how the space occupied by an element is calculated:
  • margin: The outer space, between this box and others.
  • border: The border surrounding the content and padding of an element, customizable in thickness, style, and color.
  • padding: The inner space between the content and the border.
  • content: The element’s content (text, image, etc.).

Display

The display property determines how the box behaves. It can be:
  • block: Occupies the full available width and starts on a new line.
  • inline: Does not start on a new line and only takes the necessary space.
  • inline-block: Like inline, but allows defining width, height, etc.
  • flex and grid: Modern layout systems (we’ll see them in detail later).

Rows and Columns

When we talk about flex or grid, we must think in terms of rows and columns.
  • In flex, elements are arranged in a single row or column, depending on flex-direction.
  • In grid, they can be arranged in rows and columns simultaneously.
  • Understanding this structure helps control how child elements are aligned and distributed.

Container and child

A layout always has a hierarchy:
  • The container is the parent element that defines the context (display: flex, grid, etc).
  • The child elements behave according to the rules of that context.

Spacing

The gap, row-gap, and column-gap properties allow control of the spacing between elements in a flex or grid container:
  • gap: Defines uniform spacing between rows and columns.
  • row-gap: Defines only the spacing between rows.
  • column-gap: Defines only the spacing between columns.
  • These properties replace the use of margin on children, making the layout cleaner and more predictable.

Responsiveness

Nowadays, websites must be adaptable, able to adjust to different screen sizes, from mobile devices to large monitors. Modern properties like flex and grid allow creating layouts that automatically reorganize. This makes it easier to build fluid, consistent, and more maintainable designs.

Units in CSS

In CSS there are several basic units used to define measures such as sizes, margins, paddings, fonts, etc. They are divided into absolute and relative units.

Absolute Units

These do not change depending on context; they always measure the same.
  • px (pixels): Fixed unit, ideal for precise details.
  • cm, mm, in (centimeters, millimeters, inches): More common in print.
  • pt (points): Used in typography, 1pt = 1/72 of an inch.
  • pc (picas): 1pc = 12pt, also in typography.
  • Q (quarter millimeters): 1Q = 0.25mm, used in print.

Relative Units

These change depending on context, such as screen size or font size.
  • % (percentage): Relative to the parent element. Very useful for fluid layouts.
  • em: Relative to the element’s own font size. 2em = 2 times that size. When used in font-size, it is relative to the parent’s.
  • rem: Relative to the root font size (usually html). More predictable than em.
  • vw (viewport width): 1vw = 1% of the viewport width. Useful for responsive designs.
  • vh (viewport height): 1vh = 1% of the viewport height.
  • vmin: The smaller value between vw and vh.
  • vmax: The larger value between vw and vh.
  • svw / svh: small viewport (useful on mobile with dynamic bars).
  • lvw / lvh: Represents the maximum possible viewport size, as if navigation bars (browser top or bottom) were hidden.
  • dvw / dvh: Represents the current viewport size, which changes when browser bars appear or disappear.