CSS Layout Patterns

An experienced web developer might still often came into annoying moments when doing CSS layout when some details are just not working as intended.

Here I collected some common CSS layout patterns, with notes on related fundamental concepts.

Most layouts are based on flexbox and grid.

<div class="w-full flex h-[200px] bg-red-300">
  <div class="w-[200px] bg-red-400"></div>
  <div class="flex-1 bg-red-500"></div>
</div>

TODO: side note on the right TODO: use iframe that is resizable to simulate responsiveness

Lingfei Song