locomputing
Layouts
Ein modernes Layout kann mit mehreren möglichkeiten gestaltet werden.
Hier geht es nur um die Positionierung von Elementen (div-Container) mit float, flex und grid,
diese können Responsives Design am besten darstellen.
Layout mit table läßt sich nicht Responsive darstellen!
12
356
47
8911
10
121516
1317
1418
192024
21
22
23
252627
Diese Tabelle ist nur zur Info, wie ein Layout mit float, flex oder grid aussehen kann,
wobei wohl nicht alle Zeilen für ein Layout genutzt werden!
Gerechnet wird mit 20 Spalten und 8 Zeilen!
Des weiteren ähneln sich eine Tabelle und ein grid-Layout in der Aufteilung sehr.
Layout mit table So funktionierts:
basis-html: für table
<table>
<tr>
<td rowspan="3" colspan="7"></td>
<td colspan="6"></td>
<td rowspan="2" colspan="7"></td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="20"></td>
</tr>
</table>
1234567891011121314151617181920
table-css ist sehr einfach, wir rechnen mit 20 Spalten a 5%.
rowspan = "3"
colspan = "7"		 colspan = "6" rowspan = "2"
colspan = "7"
colspan = "6"
colspan = "6"
colspan = "20"
basis-css: für table
*, *:before, *:after {
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

table {
width: 100%;
border-spacing: 3px;
border-collapse: separate;
}

td {
width:5%;
border:1px solid black;
}
table ausblenden
Layout mit float?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Ein float-Layout benötigt CSS version 1, das kann eigentlich jeder Browser darstellen.
Layout mit float So funktionierts:
basis-html: für float
<div id="box">
<div class="eins"></div> // bei float ist die erste Box immer oben! (oder oben links)
<div id="zwei">
<div class="zwei"></div>
<div class="drei"></div>
<div class="vier"></div>
</div>
<div class="funf"></div>
<div class="sechs"></div> // Die letzte Box ist immer unten!
</div>
Bei float muß das html in der Reihenfolge stehen, wie es im Browser erscheinen soll!
1234567891011121314151617181920
float-css ist nicht einfach, wie bei der Tabelle rechnen wir 20 Spalten a ca. 5%.
eine Zeile darf bei float nicht mehr als 100% haben!
div class="eins"
width:34.75%;
div class="zwei"
display:block;
div class="drei"
display:block;
div class="vier"
display:block;
div class="funf"
width:34.75%;
div class="sechs"
width:100%;
basis-css: für float
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#box {
display: block;
width: 100%;
}
.eins {
float: left;
width: 34.75%;
margin-right: 0.25%;
}
#zwei {
float: left;
width: 29.5%;
margin: 0% 0.25% 0.5% 0.25%;
}
.zwei {
display: block;
margin-bottom: 1%;
}
.drei {
display: block;
margin-bottom: 1%;
}
.vier {
display: block;
}
.funf {
float: left;
width: 34.75%;
margin-left: 0.25%;
}
.sechs {
clear: both;
display: block;
width: 100%;
}

@media screen and (max-width: 800px) {

.eins {
display: block;
width: 100%;
margin-bottom: 0.5%;
}
#zwei {
margin: 0;
width: 100%;
}
.zwei {
display: block;
width: 100%;
margin-bottom: 0.5%;
}
.drei {
display: block;
width: 100%;
margin-bottom: 0.5%;
}
.vier {
display: block;
width: 100%;
margin-bottom: 0.5%;
}
.funf {
display:block;
width: 100%;
margin-bottom: 0.5%;
}
.sechs {
display: block;
width: 100%;
}

}
float ausblenden
Layout mit flex?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Das flex-Layout ist dem float-Layout sehr ähnlich.
Ein flex-Layout benötigt CSS version 2, das kann eigentlich jeder Browser ab 2016 darstellen.
Layout mit flex So funktionierts:
basis-html: für flex
<div id="box"> // bei flex ist es möglich die Boxen für die Ausgabe mit order im css zu bestimmen!
<div class="sechs"></div>
<div class="funf"></div>
<div class="eins"></div>
<div id="zwei"> // order:2;
<div class="zwei"></div>
<div class="drei"></div>
<div class="vier"></div>
</div>
</div>
Bei flex muß das html nicht in der Reihenfolge stehen, wie es im Browser erscheinen soll!
1234567891011121314151617181920
flex-css ist sehr einfach, wie bei der Tabelle rechnen wir 20 Spalten a 5%,
wobei nur die Linke und die Rechte Spalte mit width bedient wird.
div class="sechs"
display: block; width: 100%;
order:4;
div class="funf"
width : 35%;
order:3;
div class="eins"
width : 35%;
order:1;
div class="zwei"
display: block;
div class="drei"
display: block;
div class="vier"
display: block;
basis-css: für flex
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#box {
display: flex;
flex-wrap: wrap;
gap: 5px 5px;
}

.eins {
width: 35%;
order: 1;
}

#zwei {
flex-grow: 1;
order: 2;
}

.zwei {
display: block;
margin-bottom: 5px;
}

.drei {
display: block;
margin-bottom: 5px;
}

.vier {
display: block;
}

.funf {
width: 35%;
order: 3;
}

.sechs {
display: block;
order: 4;
width: 100%;
}

@media screen and (max-width: 800px) {

.eins {
display: block;
width: 100%;
}

#zwei {
margin:0;
width: 100%;
}

.zwei {
display: block;
width: 100%;
}

.drei {
display: block;
width: 100%;
}

.vier {
display: block;
width: 100%;
}

.funf {
display:block;
width: 100%;
}

.sechs {
display: block;
width: 100%;
}

}
flex ausblenden
Layout mit grid?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Das grid-Layout ist ähnlich einer Tabelle aufgebaut.
Ein grid-Layout benötigt CSS version 3, das kann eigentlich jeder Browser ab 2018 darstellen.
Layout mit grid So funktionierts:
basis-html: für grid
<div id="box"> // bei grid wird per CSS sortiert!
<div class="sechs"></div>
<div class="drei"></div>
<div class="eins"></div>
<div class="funf"></div>
<div class="zwei"></div>
<div class="vier"></div>
</div>

Bei grid muß das html nicht in der Reihenfolge stehen, wie es im Browser erscheinen soll!
1234567891011121314151617181920
grid-css ist sehr einfach, wie bei der Tabelle nutzen wir 20 Spalten.
Je mehr Spalten, desto präziser die Positionierung. Das kann auch auf Zeilen angewand werden.
div class="sechs"
spalte: 1-20/zeile: 4
grid-column: 1/21; grid-row: 4;
div class="drei"
spalte: 8-13/zeile: 2
grid-column: 8/14; grid-row: 2;
div class="eins"
spalte: 1-7/zeile: 1-3
grid-column: 1/8; grid-row: 1/4;
div class="funf"
spalte: 14-20/zeile: 1-2
grid-column: 14/21; grid-row: 1/3;
div class="zwei"
spalte: 8-13/zeile: 1
grid-column: 8/14; grid-row: 1;
div class="vier"
spalte: 8-13/zeile: 3
grid-column: 8/14; grid-row: 3;
basis-css: für grid
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#box {
display: grid;
grid-template-columns: repeat(20, 1fr); // 1fr = 1ne Spalte
gap: 5px 5px; // Abstand zwischen Zeilen: grid-row und Spalten grid-column;
}

.eins {
grid-column: 1 / 8;
grid-row: 1 / 4;
}

.zwei {
grid-column: 8 / 14;
grid-row: 1;
}

.drei {
grid-column: 8 / 14;
grid-row: 2;
}

.vier {
grid-column: 8 / 14;
grid-row: 3;
}

.funf {
grid-column: 14 / 21;
grid-row: 1 / 3;
}

.sechs {
grid-column: 1 / 21;
grid-row: 4;
}

@media screen and (max-width: 800px) {

.eins {
grid-column: 1 / 21;
grid-row: 1;
}
.zwei {
grid-column: 1 / 21;
grid-row: 2;
}
.drei {
grid-column: 1 / 21;
grid-row: 3;
}
.vier {
grid-column: 1 / 21;
grid-row: 4;
}
.funf {
grid-column: 1 / 21;
grid-row: 5;
}
.sechs {
grid-column: 1 / 21;
grid-row: 6;
}

}
grid ausblenden