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!
1 | 2 | ||||||||||||||||||
3 | 5 | 6 | |||||||||||||||||
4 | 7 | ||||||||||||||||||
8 | 9 | 11 | |||||||||||||||||
10 | |||||||||||||||||||
12 | 15 | 16 | |||||||||||||||||
13 | 17 | ||||||||||||||||||
14 | 18 | ||||||||||||||||||
19 | 20 | 24 | |||||||||||||||||
21 | |||||||||||||||||||
22 | |||||||||||||||||||
23 | |||||||||||||||||||
25 | 26 | 27 |
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.
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>
<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>
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
---|
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
ausblenden
*, *: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;
}
-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;
}
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>
<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!
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
---|
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!
eine Zeile darf bei float nicht mehr als 100% haben!
div class="eins"
width:34.75%;
width:34.75%;
div class="zwei"
display:block;
display:block;
div class="drei"
display:block;
display:block;
div class="vier"
display:block;
display:block;
div class="funf"
width:34.75%;
width:34.75%;
div class="sechs"
width:100%;
width:100%;
basis-css: für float
ausblenden
*, *: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%;
}
}
-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%;
}
}
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>
<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!
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
---|
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.
wobei nur die Linke und die Rechte Spalte mit width bedient wird.
div class="sechs"
display: block; width: 100%;
order:4;
display: block; width: 100%;
order:4;
div class="funf"
width : 35%;
order:3;
width : 35%;
order:3;
div class="eins"
width : 35%;
order:1;
width : 35%;
order:1;
div class="zwei"
display: block;
display: block;
div class="drei"
display: block;
display: block;
div class="vier"
display: block;
display: block;
basis-css: für flex
ausblenden
*, *: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%;
}
}
-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%;
}
}
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>
<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!
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
---|
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.
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;
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;
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;
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;
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;
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;
spalte: 8-13/zeile: 3
grid-column: 8/14; grid-row: 3;
basis-css: für grid
ausblenden
*, *: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;
}
}
-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;
}
}