if you have Foo and FooBuilder, consider adding a builder method to Foo

that returns the Builder of course

Ok lorsque la recherche doit être ultra-précise. DuckDuckGo propose aussi d'affiner et de mieux contrôler ses recherches.

text-shadow: 0 0 1px rgba(0,0,0,0.3);

Put all the items in the same cells

header {
  display: grid;
  grid-template-areas: "heros";

  > * {
    grid-area: hero;
  }
}

Hero 1 summary

object-fit used to control img size
align-items: center used to vertically align the grid children

Hero 2 summary

created a color screen over the img by defining background-color of the header with rgba and adding z-index: -1 to the img to slide it behind the header
used pseudo-elements for additional design flair, and positioned them separately from the parent grid definition with place-self

Hero 3 summary

use of a wrapper to provide a secondary grid layout for content versus header design elements
creation of auto-width columns with grid-template-columns
Leveraging vmin to minimize padding on smaller viewports and increase it for larger viewports

1. aller sur https://sharedrop.io
2. partager le lien de la room par envoi d'un SMS via l'API de Free
3. ouvrir le lien reçu
4. envoyer le fichier depuis l'ordinateur
5. accepter l'envoi depuis le smartphone 😍

1. Switch the Grid Flow Axis : grid-auto-flow: column;
2. XY Center Anything : place-content: center; (on any child)
3. Intrinsically Responsive Grid Columns

:root {
  --grid-col-breakpoint: 15rem;
}

.grid-columns {
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-breakpoint), 1fr));
}

Installez log2ram pour éviter que les logs soient écrit directement sur la carte SD

$gridGap: 2rem;
$minColWidth: 15rem;

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($minColWidth, 1fr));
  grid-gap: 2rem;

  & + .grid {
    margin-top: $gridGap;
  }
}

Flexbox

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

// Optional
main {
  margin: 0 auto;
  // or: align-self: center
  max-width: 80ch;
}

Grid

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

// Optional
main {
  margin: 0 auto;
  max-width: 80ch;
}

Encore quelque chose de très utile ! Sous le coude