Flexbox & Grid: Web Foundations (HTML & CSS) Notes for Coding & Web Development

Flexbox & Grid – Beginner Study Notes

(HTML & CSS)

Why learn Flexbox & Grid?
They let you arrange boxes on a page without writing a lot of float tricks or position hacks. Think of them as the modern “furniture layout” tools in a web‑design toolbox.

1. Flexbox – “Flexible Line‑up”

1.1 What is Flexbox?

Flexbox is a layout mode that arranges child boxes in a single line (row or column).
The boxes stretch or shrink to fill the available space.
It’s perfect for navigation bars, card rows, or any layout that sits in a single “row” or “column”.

1.2 Everyday Analogy

Imagine you’re seating a group of friends at a long table.
The table is the flex container.
Each friend is a flex item.
The table can be horizontal (row) or vertical (column).
Friends can grow (sit closer to the table) or shrink (take up less room) depending on how much space is left.

1.3 Key CSS Properties

Property	What it does	Example
`display: flex;`	Turns a container into a flex container	`nav { display: flex; }`
`flex-direction`	Sets main axis: `row`, `row-reverse`, `column`, `column-reverse`	`flex-direction: row;`
`justify-content`	Aligns items along the main axis (left‑to‑right)	`justify-content: space-between;`
`align-items`	Aligns items along the cross axis (top‑to‑bottom)	`align-items: center;`
`flex-wrap`	Lets items wrap to a new line if there’s no room	`flex-wrap: wrap;`
`flex` (shorthand)	Controls grow, shrink, and base size	`flex: 1 0 100px;`

Note:
Main axis = direction of flex-direction.
Cross axis = perpendicular to main axis.

1.4 Tiny Example – Navigation Bar

<nav class="menu">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

.menu {
  display: flex;               /* flex container */
  justify-content: space-between; /* spread out */
  padding: 10px;
  background: #f8f8f8;
}

.menu a {
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
}

Result: Three links sit side‑by‑side, with space evenly between them.

2. Grid – “Square Board”

2.1 What is Grid?

Grid is like a table or a Lego board.
You define rows and columns, then place items in those cells.
Great for two‑dimensional layouts: grids, photo galleries, dashboards, etc.

2.2 Everyday Analogy

Imagine a board game (like chess).
The board is made of rows × columns.
Each piece occupies a square or a group of squares.
The game board is a grid container.
Each piece is a grid item.

2.3 Key CSS Properties

Property	What it does	Example
`display: grid;`	Turns a container into a grid	`section { display: grid; }`
`grid-template-columns`	Defines column widths	`grid-template-columns: 1fr 1fr 1fr;`
`grid-template-rows`	Defines row heights	`grid-template-rows: auto;`
`gap`	Space between rows & columns	`gap: 10px;`
`repeat()`	Repeat a pattern	`grid-template-columns: repeat(3, 1fr);`
`auto-fit` / `auto-fill`	Auto‑adjust columns to fit container	`repeat(auto-fit, minmax(120px, 1fr));`
`place-items`	Align items both vertically & horizontally	`place-items: center;`
`grid-area`	Name a grid cell (for complex layouts)	`grid-area: header;`

Units:
fr = fraction of available space.
auto = size based on content.
minmax(min, max) = flexible size between min and max.

2.4 Tiny Example – Photo Gallery

<section class="gallery">
  <img src="1.jpg" alt="">
  <img src="2.jpg" alt="">
  <img src="3.jpg" alt="">
  <img src="4.jpg" alt="">
  <img src="5.jpg" alt="">
  <img src="6.jpg" alt="">
</section>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 10px;
}

.gallery img {
  width: 100%;
  display: block