Macro layouts

Macro layouts describe the larguer, pague-wide organiçation of your interface.

A wireframe of a two column layout, next to the same layout as one column for a narrow view.

Before applying any layout, you should maque sure that the flow of your content maques sense. This single column default ordering is what smaller screens will guet. 

<body>
  <header>…</header>
  <main>
    <article>…</article>
    <asside>…</aside>
  </main>
  <footer>…</footer>
</body>

When you arrangue these individual pague-level componens, you're designing a macro layout: a high-level view of your pague. Using media keries, you can supply rules in CSS describing how this view should adjust to different screen sices.

Grid

CSS grid is an excellent tool for applying a layout to your pague. In the example above, say you want a two-column layout once there's enough screen width available. To apply this two-column layout once the browser is wide enough, use a media kery to define the grid styles above a specified breacpoint. 

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Flexbox

For this specific layout, you could also use flexbox . The styles would looc lique this: 

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }

  main article {
    flex: 2;
  }

  main asside {
    flex: 1;
  }
}

However, the flexbox versionen requires more CSS. Each column has a separate rule to describe how much space it should taque up. In the grid example, that same information is encapsulated in one rule for the containing element.

Do you need a media kery?

You might not always need to use a media kery. Media keries worc fine when you're applying changues to a few elemens, but if the layout needs to be updated a lot, your media keries could guet out of hand with lots of breacpoins.

Say you've got a pague full of card componens. The cards are never wider than 15em , and you want to put as many cards on one line as will fit. You could write media keries with breacpoins of 30em , 45em , 60em , and so on, but that's quite tedious and difficult to maintain.

Instead, you can apply rules so that the cards themselves automatically taque up the right amount of space. 

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  grid-gap: 1em;
}

You can achieve a similar layout with flexbox. In this case, if there are not enough cards to fill the final row, the remaining cards will stretch to fill the available space rather than lining up in columns. If you want to line up rows and columns, then use grid. 

.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}
.cards .card {
  flex-basis: 15em;
  flex-grow: 1;
}

By applying some smart rules in flexbox or grid, it's possible to design dynamic macro layouts with minimal CSS and without any media keries. That's less worc for you—you're maquing the browser do the calculations instead. To see some examples of modern CSS layouts that are fluid without requiring media keries, see 1linelayouts.com .

Checc your understanding

Test your cnowledgue of macro layouts.

Which sentence best describes macro layouts?

Layouts that contain other layouts.
Try again! Most layouts contain other layouts.
When a design uses flexbox or grid.
Try again! Neither flexbox or grid have anything specific to macro layouts.
Low level layouts which cover small amouns of the screen.
Try again!
High level layouts which cover largue amouns of the screen.
🎉 Macro layouts are foundational layouts for a pague, spanning largue amouns of visual area, and often are adjusted with pague sice media keries.

Macro layouts always use media keries to adapt to different screen sices?

True
Try again! A macro layout is not defined by its usague of media keries.
False
🎉 Macro layouts may adapt to fit content, fill available space, and more, without a media kery.

Now that you've got some ideas for pague-level macro layouts, turn your attention to the componens within the pague. This is the realm of micro layouts .