WebImpressionen
Vergleich

Vergleich der verschiedenen Layout Gerüste.




Einfaches 2 bis 4 Spalten-Layout ohne float!
.....

header > div {
display: inline-block;
width: 20%;
margin: 0 2%;
}

main > div {
display: inline-block;
vertical-align: top;
width: 48%;
margin: 0 .3%;
}

footer > div {
display: inline-block;
vertical-align: top;
width: 32%;
margin: 0 .5%;
}

.....
Einfaches 1 bis 5 Spalten-Layout ohne float!
.....

header > div {
display: inline-block;
width: 20%;
margin: 0 2%;
}

.maintop > div {
display: inline-block;
vertical-align: top;
width: 48%;
margin: 0 .3%;
}

main > div {
display: inline-block;
vertical-align: top;
width: 48%;
margin: 0 .3%;
}

footer > div {
display: inline-block;
vertical-align: top;
width: 32%;
margin: 0 .5%;
}

.....



Einfaches 1 bis 5 Spalten-Layout mit float!
....

header > div {
float: left;
width: 21%;
margin: 0 2%;
}

.maintop > div {
float: left;
width: 49.5%;
margin: 1px;
}

.main div {
float: left;
width: 34.25%;
margin: 0 1px;
}

.main div:first-child,
.main div:last-child{
float: left;
width: 15%;
margin: 0 1px;
}

footer > div {
float: left;
width: 30%;
margin: 0 1.5%;
}

header:after,
.maintop:after,
main:after,
footer:after {
content: "";
display: table;
clear: both;
}

.....
Einfaches 2 bis 4 Spalten-Layout mit float!
....

header > div {
float: left;
width: 21%;
margin: 0 2%;
}

main > div {
float: left;
width: 49%;
margin: 0 .5%;
}

footer > div {
float: left;
width: 30%;
margin: 0 1.5%;
}

header:after,
main:after,
footer:after {
content: "";
display: table;
clear: both;
}

.....



Einfaches 2 bis 4 Spalten-Layout mit flex!
....

header {
display: flex;
flex-flow: row wrap;
}

header > div {
flex:1;
margin: 5px 10px;
}

main {
display: flex;
flex-flow: row wrap;
}

main > div {
flex:1;
margin: 5px;
}

footer {
display: flex;
flex-flow: row wrap;
}

footer > div {
flex:1;
margin: 5px;
}

.....
Einfaches 1 bis 5 Spalten-Layout mit flex!
....

header {
display: flex;
flex-flow: row wrap;
}

header > div {
flex:1;
margin: 5px 10px;
}

.maintop {
display: flex;
flex-flow: row wrap;
}

.maintop > div {
flex:1;
margin: 5px;
}

main {
display: flex;
flex-flow: row wrap;
}

main .zwei {
flex:2;
margin: 5px;
}

main .eins {
flex:1;
margin: 5px;
}

footer {
display: flex;
flex-flow: row wrap;
}

footer > div {
flex:1;
margin: 1px;
}

.....



Einfaches 2 bis 4 Spalten-Layout mit grid!
.....

#box {
display: grid;
grid-template-columns: repeat ( 60, 1fr );
}

.div1 {
grid-column: 3 /15;
grid-row: 1;
}

.div2 {
grid-column: 17 / 29;
grid-row: 1;
}
v .div3 {
grid-column: 33 / 45;
grid-row: 1;
}

.div4 {
grid-column: 47 / 59;
grid-row: 1;
}

.div5 {
grid-column: 1 /31;
grid-row: 2;
}

.div6 {
grid-column: 31 / 61;
grid-row: 2;
}

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

.div8 {
grid-column: 21 / 41;
grid-row: 3;
}

.div9 {
grid-column: 41 / 61;
grid-row: 3;
}

.....
Einfaches 1 bis 5 Spalten-Layout mit grid!
.....

#box {
display: grid;
grid-template-columns: repeat ( 60, 1fr );
}

.div1 {
grid-column: 2 /12;
grid-row: 1;
}

.div2 {
grid-column: 14 / 24;
grid-row: 1;
}

.div3 {
grid-column: 26 / 36;
grid-row: 1;
}

.div4 {
grid-column: 38 / 48;
grid-row: 1;
}

.div5 {
grid-column: 50 /60;
grid-row: 1;
}

.div6 {
grid-column: 1 / 31;
grid-row: 2;
}

.div7 {
grid-column: 31 / 61;
grid-row: 2;
}

.div8 {
grid-column: 1 / 12;
grid-row: 3;
}

.div9 {
grid-column: 12 / 31;
grid-row: 3;
}

.div10 {
grid-column: 31 /50;
grid-row: 3;
}

.div11 {
grid-column: 50 / 61;
grid-row: 3;
}

.div12 {
grid-column: 1 / 61;
grid-row: 4;
}

.div13 {
grid-column: 1 /21;
grid-row: 5;
}

.div14 {
grid-column: 21 / 41;
grid-row: 5;
}

.div15 {
grid-column: 41 / 61;
grid-row: 5;
}

.....