¿Una línea de CSS implementa 10 diseños comunes?

01, super pequeño

Antes de la rejilla flexible, el centrado vertical no era muy elegante. Y ahora, es posible combinarnos gridcon la place-itemselegante realización del centrado horizontal y el centrado vertical al mismo tiempo .

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

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

Dirección de origen: https://codepen.io/una/pen/YzyYbBx

02. Disposición adaptativa deconstruida (The Deconstructed Pancake)

flex: 0 1 <baseWidth>

Este diseño aparece a menudo en el sitio web de Dian:

Cuando la ventana gráfica es suficiente, los tres cuadros se fijan de ancho y se colocan horizontalmente
Cuando la ventana gráfica no es suficiente (el ancho está por encima del móvil), el ancho sigue siendo fijo, pero se deconstruye automáticamente (perdona mi nivel de chino) y no está al mismo nivel.

<div class="parent white">
    <div class="box green">1</div>
    <div class="box green">2</div>
    <div class="box green">3</div>
  </div>

 .ex2 .parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .ex2 .box {
    flex: 1 1 150px; /*  flex-grow: 1 ，表示自动延展到最大宽度 */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
  }

Cuando establecemos flex: 1 1 150px;:

Dirección de origen: https://codepen.io/una/pen/WNQdBza

03, barra lateral clásica

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

Utilice el mismo griddiseño, combinado para minmax()lograr flexibilidad, que es útil cuando desea adaptarse a una pantalla grande). minmax(<min>, <max>)Significa literalmente. La combinación de la <flex>unidad es muy elegante, evitando medios inflexibles como el cálculo matemático de ancho (cuando establecemos los medios de separación).

<div class="parent">
    <div class="section yellow" contenteditable>
    Min: 150px / Max: 25%
    </div>
    <div class="section purple" contenteditable>
      This element takes the second grid position (1fr), meaning
      it takes up the rest of the remaining space.
    </div>
  </div>

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

Dirección de origen: https://codepen.io/una/pen/gOaNeWL

04, encabezados y pies de página fijos

grid-template-rows: auto 1fr auto

Cabecera y pie de página de altura fija, y mantener el espacio restante del diseño principal se usa a menudo, podemos usar gridy frla unidad terminó el niño para lograr.

<div class="parent">
    <header class="blue section" contenteditable>Header</header>
    <main class="coral section" contenteditable>Main</main>
    <footer class="purple section" contenteditable>Footer Content</footer>
  </div>

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

Dirección de origen: https://codepen.io/una/pen/bGVXPWB

05, diseño clásico del Santo Grial (diseño clásico del Santo Grial)

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

Podemos usar fácilmente el diseño de la cuadrícula para lograr el diseño del Santo Grial, y es flexible.

<div class="parent">
    <header class="pink section">Header</header>
    <div class="left-side blue section" contenteditable>Left Sidebar</div>
    <main class="section coral" contenteditable> Main Content</main>
    <div class="right-side yellow section" contenteditable>Right Sidebar</div>
    <footer class="green section">Footer</footer>
  </div>

  .ex5 .parent {    display: grid;    grid-template: auto 1fr auto / auto 1fr auto;  }    .ex5 header {    padding: 2rem;    grid-column: 1 / 4;  }  .ex5 .left-side {    grid-column: 1 / 2;  }  .ex5 main {    grid-column: 2 / 3;  }  .ex5 .right-side {    grid-column: 3 / 4;  }  .ex5 footer {    grid-column: 1 / 4;  }

Dirección de origen: https://codepen.io/una/pen/mdVbdBy

06, interesantes bloques superpuestos

Use grid-template-columnscláusulas adverbiales: grid-columnpuede lograr el diseño que se muestra en el producto a continuación. Explica con más detalle la conveniencia de las repeatcláusulas adverbiales fr.

Dirección de origen: https://codepen.io/una/pen/eYJOYjj

07, habilidades de RAM

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

Esto es muy útil para el diseño flexible de imágenes / cuadros (el número de tarjetas que se pueden organizar en una fila se adapta automáticamente).

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

 <div class="parent white">    <div class="box pink">1</div>    <div class="box purple">2</div>    <div class="box blue">3</div>    <div class="box green">4</div>  </div>

El efecto es que si se garantiza que se puede cumplir con el ancho mínimo de varias cajas (como las anteriores 150px), se adaptará automáticamente a la ubicación de varias filas.

El ancho actual es 160px(independientemente del espacio), entonces boxel ancho de los cuatro anteriores se adaptará 160pxy dividirá en 4 líneas
El ancho actual es 310px(sin considerar el espacio), los cuatro boxsegmentos superiores son dos filas y dos boxmitades del ancho
Cuando se colocan tres casillas en una fila, la tercera casilla irá automáticamente a la primera fila
Cuando se colocan cuatro cajas en una fila, la cuarta caja irá automáticamente a la primera fila

Si vamos auto-fita escribir auto-fill:

Dirección de origen: https://codepen.io/una/pen/oNbvNQv

08, flexibilidad de la tarjeta

justify-content: space-between, Combinar gridy flexrealizar el diseño terminado.

<div class="parent white">
    <div class="card yellow">
      <h3>Title - Card 1</h3>
      <p contenteditable>Medium length description with a few more words here.</p>
      <div class="visual pink"></div>
    </div>
    <div class="card yellow">
      <h3>Title - Card 2</h3>
      <p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
      <div class="visual blue"></div>
    </div>
    <div class="card yellow">
      <h3>Title - Card 3</h3>
      <p contenteditable>Short Description.</p>
      <div class="visual green"></div>
    </div>
  </div>

.ex8 .parent {
    height: auto;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
  }

  .ex8 .visual {
    height: 100px;
    width: 100%;
  }

  .ex8 .card {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    justify-content: space-between;
  }

  .ex8 h3 {
    margin: 0
  }

Ya sea que se esté reduciendo o extendiendo el ancho o el alto, el diseño de la tarjeta se puede mostrar completamente.

Dirección: https://codepen.io/una/pen/ExPYomq

09. Utilice accesorios para lograr una impresión fluida

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

El último clamp()método utilizado puede lograr una composición tipográfica fluida en una línea. Mejorar UX, muy adecuado para tarjetas con contenido de lectura, porque no queremos que una línea de palabras sea demasiado corta o demasiado larga.

<div class="parent white">
    <div class="card purple">
      <h1>Title Here</h1>
      <div class="visual yellow"></div>
      <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
    </div>
  </div>

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

  .ex9 .card {
    width: clamp(23ch, 50%, 46ch);
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }

  .ex9 .visual {
      height: 125px;
      width: 100%;
    }

Dirección de origen: https://codepen.io/una/pen/QWyLxaL

10, terminado

aspect-ratio: <width> / <height>

Al mostrar CMS u otro contenido de diseño, esperamos que las imágenes, videos y tarjetas se puedan colocar en una proporción fija. El último aspect-ratiopuede implementar esta función con elegancia (usando Chrome 84+)

<div class="parent white">
    <div class="card blue">
      <h1>Video Title</h1>
      <div class="visual green"></div>
      <p>Descriptive Text. This demo works in Chromium 84+.</p>
    </div>
  </div>

 .ex10 .parent {    display: grid;    place-items: center;  }  .ex10 .visual {    aspect-ratio: 16 / 9;  }  .ex10 .card {    width: 50%;    display: flex;    flex-direction: column;    padding: 1rem;  }

Dirección de origen: https://codepen.io/una/pen/xxZKzaX