Como facer unha plantilla (layout) de maneira manual sen empregar táboas

En ocasións queremos facer unha plantilla para engadir fotos, texto, etc e que non se movan os contidos á hora de editar  unha páxina web, tanto en Drupal como programando directamente en html.

Aínda que hai moitas alternativas, expoño unha sinxela de entender: a creación de celas con filas e columnas.

1. O primeiro paso é crear o contedor global. Eu voulle chamar wrapper.

2. Dentro de wrapper engadimos outro div co nome de contidos. A utilizade de independizar contedores é a de pode engadirlles fondos, centrarlos, configurar as fontes para cada div, etc.

3. Seguidamente inserimos dentro de contidos un div cunha clase fila.

4. E finalmente dividimos a fila en tantas columnas como desexemos, iso si, tendo en conta o espazo entre as mesmas. Isto podemos facelo con float left e estudando os pixeles ou porcentaxe, ou ben, xa de forma máis cómoda, empregando a clase flexbox, que nos facilita o cálculos e a disposición na pantalla.

Vou definir o div en html do seguinte xeito: <div class="col tres estilo_columna"></div>

 

Con float-left:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    html, body{
        width:100%;
    }
    .wrapper{
        width:80%;
        height:400px;
        border:solid 2px black;
        padding: 10px;
        margin:0 auto;
    }

    .contidos{
        margin:0 auto;
        width:90%;
        height: 300px;
        border:solid 2px grey;
    }

    .fila{
        width:95%;
        height:200px;
        margin:0 auto;
        border:solid 1px blueviolet;
    }

    .col{
        float:left;
        height:80px;
        margin-left:10px;
        margin-right:10px;
    }

    .tres{
        width:100px;
    }

    .estilo_columna{
        background:olive;
    }
</style>
<body>
    <div class="wrapper">
        <h2>wrapper</h2>
        <div class="contidos">
            <h3>contidos</h3>
            <div class="fila">
                <h4>fila</h4>
                <div class="col tres estilo_columna"></div>
                <div class="col tres estilo_columna"></div>
                <div class="col tres estilo_columna"></div>
            </div>
        </div>
    </div>
    
</body>
</html>

Se queremos facelo empregando porcentaxes e non en pixeles, para que o contido se adapte aos dispositivos móbiles, podemos deixar un marxe á esquerda e á dereita do 3%. Poderíamos definir as clases col e tres do seguinte xeito:

    .col{
        float:left;
        height:80px;
        margin-left:3%;
        margin-right:3%;
    }

    .tres{
        width:27.3%;
    }

Para calcular o ancho que lle damos á clase tres, debemos de ter en conta o ancho dos espazos intermedios, fixándonos que entre celas é do 6%, e nos bordes do 3%.

ancho_cela=(100 -(3*6))/3=82/3=27.3%

 

Sen embargo, debemos de ter en conta que cada vez que empregamos un float left, debemos de inserir un clear:both; pois os contidos que veñen a continuación pódense ver afectados polo float:left. Para isto, engadiremos un clear:both antes e despois da clase fila, que é o elemento pai das tres columnas. Aínda que chegaría con clear:both, voulle dar máis seguridade para que teñamos certeza de que queda limpo como é debido:

.fila:after, .fila:before{
    content: "";
    width:0;
    height: 0;
    clear:both;
    display:block;
    overflow: hidden;
    visibility: hidden;
}

 

E o código do que levamos feito queda do seguinte xeito:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    html, body{
        width:100%;
    }
    .wrapper{
        width:80%;
        height:400px;
        border:solid 2px black;
        padding: 10px;
        margin:0 auto;
    }

    .contidos{
        margin:0 auto;
        width:90%;
        height: 300px;
        border:solid 2px grey;
    }

    .fila{
        width:95%;
        height:200px;
        margin:0 auto;
        border:solid 1px blueviolet;
    }

   
    .col{
        float:left;
        height:80px;
    }

    .aux_left{
        width:3%;
        background:greenyellow;
    }

    .aux_right{
        width:3%;
        background:pink;
    }

    .tres{
        width:27.3%;
    }

    .estilo_columna{
        background:olive;
    }

    p{
        text-align:center;
    }

    .fila:after, .fila:before{
    content: "";
    width:0;
    height: 0;
    clear:both;
    display:block;
    overflow: hidden;
    visibility: hidden;
    }
    
</style>
<body>
    <div class="wrapper">
        <h2>wrapper</h2>
        <div class="contidos">
            <h3>contidos</h3>
            <div class="fila">
                <h4>fila</h4>
                <div class="col aux_left"> <p>3%</p></div>
                <div class="col tres estilo_columna"><p>27.3%</p></div>
                <div class="col aux_right"> <p>3%</p> </div>
                <div class="col aux_left"><p>3%</p> </div>
                <div class="col tres estilo_columna"><p>27.3%</p></div>
                <div class="col aux_right"> <p>3%</p></div>
                <div class="col aux_left"> <p>3%</p></div>
                <div class="col tres estilo_columna"><p>27.3%</p></div>
                <div class="col aux_right"><p>3%</p> </div>
            </div>
        </div>
    </div>
    
</body>
</html>

CON FLEXBOX

Con flexbox, simplifícase moito. Tan só no elemento pai das columnas (neste caso fila), engadimos display:flex; e justify-content:space-around; A propia clase xa nos divide o espazo restante entre os ocos, de igual que facíamos no caso anterior, empregando float:left;

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    html, body{
        width:100%;
    }
    .wrapper{
        width:80%;
        height:400px;
        border:solid 2px black;
        padding: 10px;
        margin:0 auto;
    }

    .contidos{
        margin:0 auto;
        width:90%;
        height: 300px;
        border:solid 2px grey;
    }

    .fila{
        width:95%;
        height:200px;
        margin:0 auto;
        border:solid 1px blueviolet;
        display:flex;
        justify-content: space-around;
        
    }
    .col{
        height:80px;
    }
    .tres{
        width:27.3%;
    }
    .estilo_columna{
        background:olive;
    }
    p{
        text-align:center;
        color:white;
    }
    
</style>
<body>
    <div class="wrapper">
        <h2>wrapper</h2>
        <div class="contidos">
            <h3>contidos</h3>
            <div class="fila">
                <div class="col tres estilo_columna"><p>27.3%</p></div>
                <div class="col tres estilo_columna"><p>27.3%</p></div>
                <div class="col tres estilo_columna"><p>27.3%</p></div>
            </div>
        </div>
    </div>
    
</body>
</html>

CON GRID

Coa clase grid, o deseño aínda se simplifica máis. Nin tan sequera temos porque definir as filas. Xa se encarga grid de todo. Velaquí temos un exemplo:

 

E este é o código:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    html, body{
        width:100%;
    }
    .wrapper{
        width:80%;
        height:400px;
        border:solid 2px black;
        padding: 10px;
        margin:0 auto;
    }

    .contidos{
        margin:0 auto;
        width:90%;
        height: 300px;
        border:solid 2px grey;
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap:10px;
    }

    .col{
        height:80px;
    }
   
    .estilo_columna{
        background:olive;
    }
    p{
        text-align:center;
        color:white;
    }
    
</style>
<body>
    <div class="wrapper">
        <h2>wrapper</h2>
        <div class="contidos">
            
            
                <div class="col estilo_columna"></div>
                <div class="col estilo_columna"></div>
                <div class="col estilo_columna"></div>
            
        </div>
    </div>
    
</body>
</html>