Rebuilding a layout from a design or screenshot is one of the most common tasks a junior frontend developer gets. Modern CSS gives you two tools that handle almost every layout: flexbox and grid. Learn them well and you will rarely fight the page again.
The box model first
Every element is a box made of content, padding (space inside the border), a border, and margin (space outside). Add this rule at the top of every stylesheet so widths behave predictably:
*, *::before, *::after { box-sizing: border-box; }With border-box, padding and border are included in an element's width, so a box set to 100% wide never overflows the screen.
Flexbox: one direction
Flexbox arranges items in a single row or column. It is ideal for navigation bars, a row of buttons, or a card with an image beside text.
.toolbar {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
}- sets the space between items.