CSS

grid-template
columns & areas

Hier zum Testen der Einbau von einem CSS-Grid nach:
www.w3schools.com

Ältere Browser, wie der IE11, unterstützen CSS-Grid nicht.

Grid column kommt aus CSS
2
3
4
5
6
7

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; 
}

Header
Main
Hier als Area
'grid-template-areas'
Right
am Handy darunter
Footer

Logo

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; 
  } 
}

Header
Menu
Main
Right
Footer

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); 
}