[반응형 디자인 / 개발] 레이아웃 Layout

Layouts for Responsive Design

macro

• with grid or flex properties
• usually means page layout

micro

• with grid, flex (or container queries) properties
• usually means contents in container (component) layout
• container queries will allow contents to be notified of parent's, same as container, current size.

container queries

main,
aside {
  container-type: inline-size;
}

.media-illustration {
  max-width: 200px;
  margin: auto;
}

@container (min-width: 25em) {
  .media {
    display: flex;
    align-items: center;
    gap: 1em;
  }

  .media-illustration {
    flex: 1;
  }

  .media-content {
    flex: 3;
  }
}

styles of media, media-illustration, media-content will be changed by main or aside element's width (not like media queries).

Combining queries (media & container)

use media queries for the page layout and container queries for the components withing the page.