Layouts com 1 linha de CSS

Grade ao Centro

place-content: center

.parent {
  display: grid;
  place-content: center;
}

<div class="parent">
  <div class="box green" contenteditable>
    :)
  </div>
</div>

Comando Lateral

grid-template-columns: minmax(<min>, <max>)...

.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

<div class="parent">
  <div class="section blue" contenteditable>
    Sidebar
  </div>

  <div class="section green" contenteditable>
    Main
  </div>
</div>

Padrão Maciota

grid-template-rows: auto 1fr auto

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

<div class="parent">
  <header class="section blue" contenteditable>
    Header
  </header>

  <main class="section green" contenteditable>
    Main
  </main>

  <footer class="section blue" contenteditable>
    Footer
  </footer>
</div>

Santo Graal

grid-template: auto 1fr auto / auto 1fr auto

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

header {
  grid-column: 1 / 4;
}

.left {
  grid-column: 1 / 2;
}

main {
  grid-column: 2 / 3;
}

.right {
  grid-column: 3 / 4;
}

footer {
  grid-column: 1 / 4;
}

<div class="parent">
  <header class="section blue" contenteditable>
    Header
  </header>

  <div class="section yellow left" contenteditable>
    Left Sidebar
  </div>

  <main class="section green" contenteditable>
    Main
  </main>

  <div class="section yellow right" contenteditable>
    Right Sidebar
  </div>

  <footer class="section blue" contenteditable>
    Footer
  </footer>
</div>

RAM (repeat, auto-fit, minmax)

grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))

.parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns:
    repeat(auto-fit, minmax(150px, 1fr));
}

<div class="parent">
  <div class="box green">1</div>
  <div class="box blue">2</div>
  <div class="box yellow">3</div>
  <div class="box red">4</div>
</div>

RAM 2 (repeat, auto-fill, minmax)

grid-template-columns: repeat(auto-fill, minmax(<base>, 1fr))

.parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns:
    repeat(auto-fill, minmax(150px, 1fr));
}

<div class="parent">
  <div class="box green">1</div>
  <div class="box blue">2</div>
  <div class="box yellow">3</div>
  <div class="box red">4</div>
</div>

Clamor pelo clamp

clamp(<min>, <actual>, <max>)

.parent {
  display: grid;
  place-items: center;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  width: clamp(200px, 50%, 400px);
}

<div class="parent">
  <div class="card green">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet,
    consectetur adipiscing elit.</p>
  </div>
</div>

Bye Bye Bootstrap

grid-template-columns: repeat(12, 1fr)

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.span-12 {
  grid-column: 1 / span 12;
}

.span-6 {
  grid-column: 1 / span 6;
}

.span-4 {
  grid-column: 4 / span 4;
}

.span-2 {
  grid-column: 3 / span 2;
}

<div class="parent">
  <div class="section green span-12">Span 12</div>
  <div class="section red span-6">Span 6</div>
  <div class="section blue span-4">Span 4</div>
  <div class="section yellow span-2">Span 2</div>
</div>

Artigo: Porque CSS Grid é melhor que Bootstrap para criar layouts

flex-grow 9999

flex-grow: 9999

.parent {
  display: flex;
  flex-wrap: wrap;
}

.green {
  flex-grow: 1;
}

.blue {
  flex-grow: 9999;
  height: 100%;
}

<div class="parent">
  <div class="section green">
    Lorem ipsum.
  </div>

  <div class="section blue">
    Lorem ipsum dolor sit amet consectetur.
  </div>
</div>

Para mais informações, leia nosso artigo completo.

Grid flex flexível

flex: 1 1 <flex-basis>

.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.parent > * {
  flex: 1 1 150px;
}

<section class="parent">
  <article class="section green">Item 1</article>
  <article class="section blue">Item 2</article>
  <article class="section red">Item 3</article>
</section>