5. CSS layout

Learning outcomes:

• Understand that normal flow is the default way a browser lays out block and inline content.

• Properties such as display, float, and position are intended to change how the browser lays out content.

Resources:

• Introduction to CSS layout

• Normal flow

Learning outcomes:

• Understand the purpose of floats — for floating images inside columns of text, or possibly other fun techniques like drop caps and floating inset information boxes.

• Understand that floats used to be used for multiple-column layouts, but this is no longer the case now better tools are available (see 5.4 Modern layout for details).

• Using the float property to create floats.

• Clearing floats using clear, and the display: flow-root value.

Resources:

• Floats

• All About FLoats, CSS-Tricks (2021)

Learning outcomes:

• Understand that static positioning is the default way elements are positioned on the page.

• Relative positioning:

  • Understand that relatively positioned elements remain in the normal flow.

  • Final layout position can be modified using the top, bottom, left, and right properties.

• Absolute positioning:

  • Absolute (and fixed/sticky) positioning takes elements completely out of the normal flow to sit in a separate layer.

  • top, bottom, left, right, and inset have different effects on absolutely-positioned elements than on relatively-positioned ones.

  • Setting the positioning context of a positioned element by positioning an ancestor element.

• Fixed and sticky positioning:

  • Understand how these differ from absolute positioning.

• Understand what z-index is, and how to control the stacking of positioned elements with the z-index property.

Resources:

• Positioning

• Aside: Position: relative & absolute, Scrimba Course Partner

• Stacking context

Learning outcomes:

• In general, gain an understanding of modern CSS layout techniques.

• Understand that, for basic placement tasks, the below tools could be overkill. Learn simple old-school techniques and where they are still effective:

  • Margins and padding for spacing.

  • Auto margins for horizontal centering tasks (e.g. margin: 0 auto).

• Flexbox:

  • Understand the purpose of flexbox — flexibly lay out a set of block or inline elements in one dimension.

    • See We have a problem that flexbox can fix by Scrimba Course Partner for a use case example.

  • Understand flex terminology — flex container, flex item, main axis, and cross axis.

  • display: flex, and what it gives you by default.

  • Rows and columns, and how to wrap content onto new rows and columns.

  • Flexible sizing of flex items.

  • Justifying and aligning content.

  • Adjusting flex item ordering.

• CSS Grid:

  • Understand the purpose of CSS Grid — flexibly lay out a set of block or inline elements in two dimensions.

  • Understand grid terminology — rows, columns, gaps, and gutters.

  • display: grid, and what it gives you by default.

  • Defining grid rows and columns:

    • The fr unit.

    • minmax().

  • Defining gaps.

  • Positioning elements on the grid.

Resources:

• Flexbox

• Grids

Learning outcomes:

• Understand what responsive design is — designing web layouts so that they are flexible and work well across different device screen sizes, resolutions, etc.

• Understand the relationship between modern layout tools such as grid and flexbox, and responsive design.

• Media queries:

  • The mobile-first technique.

  • Understand breakpoints.

  • Using width and height media queries to create responsive layouts.

• <meta viewport="">, and how to use it to get web documents to display appropriately on mobile devices.

  • For the sake of accessibility, never set user-scalable=no.

Resources:

• Build a responsive site: Module intro, Scrimba Course Partner

• Responsive design

• Beginner's guide to media queries