Diseño de Interfaz Web - 2025

DIW - 2025

Dos columnas

Este ejemplo puede ser utilizado para generar estructuras de dos o más columnas en formularios.

HTML

<!-- DOS COLUMNAS -->
<div class="dos-col">
    <div>
        <!-- Campo 1 -->
        <label for="id-campo-1">Campo 1</label>
        <input id="id-campo-1" name="name-campo-1" type="text">
    </div>
    <div>
        <!-- Campo 2 -->
        <label for="id-campo-2">Campo 2</label>
        <input id="id-campo-2" name="name-campo-2" type="text">
    </div>
</div>

CSS

.dos-col {
    display: grid;
    /* Cambiar por la cantidad de columnas que sea necesaria */
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

Resultado

See the Pen DIW - Dos columnas by Mauro Fernández (@mauro-clases-diw) on CodePen.