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>
