Crear columnas como divs en WordPress sin Gutenberg

Hacia el final del post tienes otra forma de hacerlo… (ver)

Valencia, 01/03/2022, G.B.
Tras leer el artículo Como aplicar columnas en WordPress incorporadas en style.css de la web de antonioperez.pro (estaba buscando cómo hacerlo de otra forma), he hecho algunos pequeños cambios (y seguiré haciendo más) para ajustar las columnas realizadas con divs en WordPress sin utilizar Gutenberg. Aquí van los archivos (CSS u hoja de estilo CSS) y el HTML que he utilizado para crear tres columnas.

Mis pequeños cambios están en azul en el código  CSS, en mi caso insertado en la personalización del CSS que permite WordPress, al menos en plantillas más desarrolladas. Se llama CC adicional y lo encontrarás en Apariencia -> Personalización –> CSS adicional de tu tema o plantilla, si lo permite, claro. En caso contrario, tendrías que modificar la hoja de estilos de tu tema, a sabiendas que si actualizas la plantilla, tema o theme, los cambios se te irán ‘al garete‘. Bueno, aquí va:

Código HTML:

<div class=”one-third first”><a href=”https://indaga.net/wp-content/uploads/2022/02/cropped-indaga.png”><img class=”aligncenter size-medium wp-image-3265″ src=”https://indaga.net/wp-content/uploads/2022/02/cropped-indaga-300×300.png” alt=”indaga” width=”300″ height=”300″ /></a>La primera columna que ves aquí tiene un ancho de un tercio del espacio total que ocupa la parte en la que estamos escribiendo nuestra página o post. En la hoja de estilos le he dado un margen de 2 píxeles a ambos lados.</div>

<div class=”one-third second”><a href=”https://indaga.net/wp-content/uploads/2022/02/cropped-indaga.png”><img class=”aligncenter size-medium wp-image-3265″ src=”https://indaga.net/wp-content/uploads/2022/02/cropped-indaga-300×300.png” alt=”indaga” width=”300″ height=”300″ /></a>La segunda columna que ves aquí tiene un ancho de un tercio del espacio total que ocupa la parte en la que estamos escribiendo nuestra página o post. En la hoja de estilos le he dado un margen de 2 píxeles a ambos lados.</div>

<div class=”one-third third”><a href=”https://indaga.net/wp-content/uploads/2022/02/cropped-indaga.png”><img class=”aligncenter size-medium wp-image-3265″ src=”https://indaga.net/wp-content/uploads/2022/02/cropped-indaga-300×300.png” alt=”indaga” width=”300″ height=”300″ /></a>La tercera columna que ves aquí tiene un ancho de un tercio del espacio total que ocupa la parte en la que estamos escribiendo nuestra página o post. En la hoja de estilos le he dado un margen de 2 píxeles a ambos lados.</div>

Código CSS:

/* Column Classes Link: 
http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css */

.five-sixths, .four-sixths, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-sixths, .two-fourths, .two-sixths, .two-thirds {
float: left; margin-left: 2.564102564102564%;
width: 100%;
text-align: justify;
padding-left: 2px;
padding-right: 2px;
}
.one-half, .three-sixths, .two-fourths {
width: 48.717948717948715%;
}
.one-third, .two-sixths {
width: 31.623931623931625%;
}
.four-sixths, .two-thirds {
width: 65.81196581196582%;
}
.one-fourth {
width: 23.076923076923077%;
}
.three-fourths {
width: 74.35897435897436%;
}
.one-sixth {
width: 14.52991452991453%;
}
.five-sixths {
width: 82.90598290598291%;
}
.first {
clear: both;
margin-left: 0; margin-right: 2;
}

Ejemplo tras crear los estilos en CSS personalizado de mi WordPress y escribir el código HTML de los DIVS. Añado una imagen (centrada) en cada columna:

Fuente: https://antonioperez.pro/como-aplicar-columnas-en-wordpress-incorporadas-en-style-css/

A posteriori… otra forma:
Dejo otra forma de hacerlo. En esta las columnas o divs se ajustan a los distintos dispositivos, al tener la propiedad flex:
display: flex;
flex-direction: column;

Código hoja de estilos:

/* OTRA FORMA TEMA DIVS */
.container2 {
/* Por defecto en modo fila, uno al lado del otro */
display: flex;
flex-flow: row;
/* vertical-align: top; */
}

.item2 {
flex: 1 1 auto;
}

@media (max-width: 1200px) {
.container2 {
/* si es muy angosta, uno debajo del otro */
flex-flow: column;
align-items: center;
}
}
.una {
background-color: transparent;
text-align: justify;
padding: 5px 5px 5px 0;
width: auto-flow;

}
.dos {
background-color: transparent;
text-align: justify;
padding: 5px 5px 5px 0;
width: auto-flow;

}
.tres {
background-color: transparent;
text-align: justify;
padding: 5px 5px 5px 0;
width: auto-flow;

}

Código HTML:

<div class=”container2″>
<div class=”item2 una”>
<h4>Título 1</h4>
Esto es una prueba de una columna. Tiene la propiedad flex, por lo que se ajustará a todas las pantallas.
</div>

<div class=”item2 dos”>
<h4>Título 2</h4>
Esto es una prueba de otra columna. Tiene la propiedad flex, por lo que se ajustará a todas las pantallas.
</div>

<div class=”item2 tres”>
<h4>Título 3</h4>
Y esto es una prueba de la tercera y última columna. También tiene la propiedad flex, por lo que se ajustará a todas las pantallas.
</div>
</div>

Salida:

Título 1

Esto es una prueba de una columna. Tiene la propiedad flex, por lo que se ajustará a todas las pantallas.

Título 2

Esto es una prueba de otra columna. Tiene la propiedad flex, por lo que se ajustará a todas las pantallas.

Título 3

Y esto es una prueba de la tercera y última columna. También tiene la propiedad flex, por lo que se ajustará a todas las pantallas.


Enlaces recomendados sobre CSS (Cascading Style Sheets):

CSS | MDN (en inglés)
Lenguaje CSS (en castellano)
Conceptos básicos de la propiedad flex
Seguiré