Layout & Designing

CSS layout is one of the most important skills for a web developer. Modern CSS provides Flexbox and Grid — two powerful systems that make complex layouts simpler and more predictable than older methods like floats and tables.

Flexbox

Flexbox is designed for one-dimensional layouts — either a row or a column. It excels at distributing space and aligning items within a container.

Flex Container Properties

.container {
  display: flex;           /* enables flexbox */
  flex-direction: row;     /* row (default), row-reverse, column, column-reverse */
  flex-wrap: wrap;         /* nowrap (default), wrap, wrap-reverse */
  justify-content: center; /* main axis alignment */
  align-items: center;     /* cross axis alignment */
  gap: 20px;               /* space between items (modern, replaces margins) */
}

• justify-content — aligns along the main axis: flex-start, flex-end, center, space-between, space-around, space-evenly
• align-items — aligns along the cross axis: stretch, flex-start, flex-end, center, baseline
• align-content — aligns multiple rows (when flex-wrap is active)

Flex Item Properties

.item {
  flex: 1;                   /* shorthand: grow shrink basis */
  flex-grow: 1;              /* can it grow? */
  flex-shrink: 1;            /* can it shrink? */
  flex-basis: 200px;         /* initial size before growing/shrinking */
  align-self: center;        /* override align-items for this item */
  order: 2;                  /* reorder items (default 0) */
}

Common Flexbox Patterns

• Centering: display: flex; justify-content: center; align-items: center;
• Equal-width columns: .item { flex: 1; }
• Sticky footer: <main> has flex: 1, footer stays at bottom
• Holy grail layout: header, footer, nav + main + aside

CSS Grid

Grid is designed for two-dimensional layouts — rows and columns simultaneously.

Grid Container Properties

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;   /* three columns */
  grid-template-rows: auto 1fr auto;    /* three rows */
  gap: 20px;                             /* shorthand for row-gap and column-gap */
  grid-template-areas:                   /* name areas for placement */
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

Units: px, %, fr (fraction of remaining space), minmax(200px, 1fr), repeat(3, 1fr), auto-fill, auto-fit

Grid Item Properties

.item {
  grid-column: 1 / 3;         /* span from column line 1 to 3 */
  grid-row: 1 / 2;            /* span from row line 1 to 2 */
  grid-area: header;          /* place in named area */
  justify-self: center;        /* horizontal alignment within cell */
  align-self: stretch;         /* vertical alignment within cell */
}

Grid vs Flexbox

• Use Flexbox when the layout is one-dimensional (a row OR a column)
• Use Grid when the layout is two-dimensional (rows AND columns together)
• Both can be nested — a grid item can be a flex container and vice versa

Positioning

The position property controls how an element is placed in the document:

• static — normal document flow (default)
• relative — offset from its normal position using top, right, bottom, left; still occupies original space
• absolute — removed from flow, positioned relative to nearest positioned ancestor
• fixed — removed from flow, positioned relative to the viewport (stays on screen while scrolling)
• sticky — hybrid of relative and fixed; sticks when scroll reaches a threshold

.relative-box { position: relative; top: 20px; left: 20px; }
.absolute-box { position: absolute; top: 0; right: 0; }
.fixed-header { position: fixed; top: 0; width: 100%; z-index: 100; }
.sticky-nav { position: sticky; top: 0; z-index: 10; }

Z-Index

z-index controls the stacking order of positioned elements. Higher values appear on top:

.modal-overlay { position: fixed; z-index: 1000; }
.modal-content { position: fixed; z-index: 1001; }

z-index only works on positioned elements (not static). Each positioned element creates a stacking context.

Float and Clear

Floats were the primary layout method before Flexbox and Grid. Today they are mainly used for wrapping text around images:

img { float: left; margin-right: 15px; }
 
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

The clear property (left, right, both) forces an element below floated elements.