CSS Layout Techniques

There are four main layout modes in CSS:

1. Block layout: For laying out documents (block/inline).
2. Multi-column layout: For laying out text in multiple columns.
3. Flexbox layout: For laying out elements in a single dimension (row or column).
4. Grid layout: For laying out elements in two dimensions (rows and columns).

1. CSS Flexbox

The Flexbox Layout module allows you to design flexible responsive layout structures without using float or positioning.

Container Properties:

• display: flex;
• flex-direction: row, column, row-reverse, column-reverse.
• justify-content (Horizontal): center, flex-start, flex-end, space-between.
• align-items (Vertical): center, flex-start, stretch.

.flex-container {
  display: flex;
  justify-content: center;
}

2. CSS Grid

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Container Properties:

• display: grid;
• grid-template-columns: auto auto auto; (Three columns).
• grid-gap: Space between items.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
}

3. CSS Float (Legacy)

Before Flexbox and Grid, float was commonly used for layouts.

.col {
  float: left;
  width: 50%;
}
/* Clearfix hack is needed after floated elements */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}