.container {
  display: flex;

  /* Direction */
  flex-direction: row;            /* default: left to right */
  flex-direction: column;         /* top to bottom */
  flex-direction: row-reverse;
  flex-direction: column-reverse;

  /* Wrapping */
  flex-wrap: nowrap;      /* default: no wrap */
  flex-wrap: wrap;        /* wrap to next line */

  /* Shorthand */
  flex-flow: row wrap;
}

.container {
  /* Main axis (flex-direction axis) */
  justify-content: flex-start;    /* default */
  justify-content: flex-end;
  justify-content: center;
  justify-content: space-between; /* equal space between */
  justify-content: space-around;  /* space around items */
  justify-content: space-evenly;  /* equal space everywhere */

  /* Cross axis */
  align-items: stretch;     /* default: fill height */
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;      /* vertical center! */
  align-items: baseline;

  /* Multi-line cross axis */
  align-content: flex-start;
  align-content: center;
  align-content: space-between;
}

.item {
  /* flex-grow: how much extra space to take */
  flex-grow: 0;   /* default: don't grow */
  flex-grow: 1;   /* grow to fill space */
  flex-grow: 2;   /* grow twice as much */

  /* flex-shrink: how much to shrink when needed */
  flex-shrink: 1; /* default: shrink equally */
  flex-shrink: 0; /* don't shrink */

  /* flex-basis: initial main-axis size */
  flex-basis: auto;   /* default */
  flex-basis: 200px;
  flex-basis: 25%;

  /* Shorthand: grow shrink basis */
  flex: 1;            /* flex: 1 1 0% */
  flex: 0 0 200px;    /* fixed 200px */
  flex: auto;         /* flex: 1 1 auto */

  /* Self alignment (override align-items) */
  align-self: center;
  align-self: flex-end;

  /* Order (default: 0) */
  order: -1;   /* move to front */
  order: 1;    /* move to back */
}

/* Center anything */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Sticky footer */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page footer { margin-top: auto; }

/* Equal columns */
.cols > * { flex: 1; }

/* Navigation bar */
.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav .logo { margin-right: auto; } /* push rest to right */

.container {
  display: grid;

  /* Define columns */
  grid-template-columns: 200px 1fr 1fr;      /* fixed + flexible */
  grid-template-columns: repeat(3, 1fr);     /* 3 equal columns */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* responsive */

  /* Define rows */
  grid-template-rows: auto;
  grid-template-rows: 100px 1fr auto;

  /* Gaps */
  gap: 1rem;             /* row and column gap */
  column-gap: 1rem;
  row-gap: 0.5rem;

  /* Auto size for new rows */
  grid-auto-rows: minmax(100px, auto);
}

/* Place items by line numbers */
.item {
  grid-column: 1 / 3;        /* columns 1 to 3 */
  grid-column: 1 / span 2;   /* start at 1, span 2 cols */
  grid-row: 1 / 3;
  grid-row: 2 / span 2;
}

/* Shorthand: row-start / col-start / row-end / col-end */
.item {
  grid-area: 1 / 1 / 3 / 3;
}

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

.container {
  /* Align all items within their cells */
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;

  /* Align entire grid within container */
  justify-content: start | end | center | space-between;
  align-content: start | end | center | space-between;
}

.item {
  /* Override alignment for single item */
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

/* Auto-fill: fill available space with columns */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

/* Auto-fit: collapse empty columns */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Responsive without media queries */
.responsive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
}