Hier zum Testen der Einbau von einem CSS-Grid nach:
www.w3schools.com
Ältere Browser, wie der IE11, unterstützen CSS-Grid nicht.
HTML 1. Grid siehe im Quelltext. CSS vom Grid oben:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 3px;
background-color: #e2e2e2;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
word-break: break-all;
padding: 20px 10px;
font-size: 16px;
}
HTML 2. Grid siehe im Quelltext. CSS vom Grid oben:
.item1 {
grid-area: header;
}
.item2 {
grid-area: menu;
}
.item3 {
grid-area: main;
}
.item4 {
grid-area: right;
}
.item5 {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-areas: 'header header header header header header' 'menu main main main main right' 'footer footer footer footer footer footer';
grid-template-rows: 80px 300px auto;
grid-gap: 3px;
background-color: transparent;
padding: 10px;
}.grid-container > div {
background-color: rgba(255, 255, 255, 0.7);
text-align: center;
padding: 20px 10px;
font-size: 24px;
color: black;
}img {
width: 150px;
max-width: 90%;
}#header1 {
background-color: rgba(255, 255, 255, 0.8);
}@media (max-width: 768px) {
.grid-container {
grid-template-areas: 'header header header header header header' 'menu main main main main main' 'right right right right right right' 'footer footer footer footer footer footer';
}
#mytitleline {
display: none;
}
}
HTML 3. Grid siehe im Quelltext. CSS vom Grid oben:
.item1 {
grid-area: header;
}
.item2 {
grid-area: menu;
}
.item3 {
grid-area: main;
}
.item4 {
grid-area: right;
}
.item5 {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';
grid-gap: 1px;
background-color: transparent;
padding: 0px;
}.grid-container > div {
background-color: rgba(255, 255, 255, 0.7);
text-align: center;
padding: 20px 10px;
font-size: 24px;
color: black;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
}#header2 {
background-color: rgba(255, 255, 255, 0.8);
}