Centrar en css moderno en una linia de codigo!

Acabo de leer un magnifico post (El original en ingles con ejemplos en vivo) sobre nuevas tecnologías de css moderno.

Diez técnicas modernas para posicionar y deseñar bloques en CSS de una línea de código!

01. Super Centrado

place-items: center

Soporte de browsers: Edge Firefox Chrome Safari

Ejemplo de css:

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

01. Super Centrado

place-items: center

Soporte de browsers: Edge Firefox Chrome Safari

Ejemplo de css:

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

02. El crepe deconstruido

flex: 0 1 

Soporte de browsers: Edge Firefox Chrome Safari

Ejemplo de css:

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

.ex2 .box {
flex: 1 1 150px; /* Estirado: */
flex: 0 1 150px; /* No Estirado: */
margin: 5px;
}

03. La barra lateral habla

grid-template-columns: minmax(, )

Soporte de browsers: Edge Firefox Chrome Safari

Ejemplo de css:

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

04. Pila de la crepe

grid-template-rows: auto 1fr auto

Soporte de browsers: Edge Firefox Chrome Safari

Ejemplo de css:

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

05. Santo Grial diseño clásico

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

Soporte de browsers: Edge Firefox Chrome Safari

Ejemplo de css:

.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;
}

06. Cuadrícula de 12 tramos

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

Soporte de browsers: Edge Firefox Chrome Safari

Ejemplo de css:

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

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

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

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

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

/* centering text */
.ex6 .section {
display: grid;
place-items: center;
text-align: center
}

07. RAM (Repetir, Automático, MinmaMaximo)

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

Soporte de browsers: Edge Firefox Chrome Safari

Ejemplo de css:

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

08. Alinear

justify-content: space-between

Soporte de browsers: Edge Firefox Chrome Safari

Ejemplo de css:

.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
}

09. Sujetando mi estilo

 clamp (min, actual, max) 

Soporte de browsers: Edge Firefox Chrome Safari

Ejemplo de css:

.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%;
}

10. Respectar de Aspecto

aspect-ratio: width / height

Soporte de browsers: Edge Firefox Chrome Safari

Ejemplo de css:

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

.ex10 .visual {
aspect-ratio: 16 / 9;
}

.ex10 .card {
width: 50%;
display: flex;
flex-direction: column;
padding: 1rem;
}