webdesign-Becker_Ehricht_Fleck_Minkowitsch_Pfau/src/css/grid.css

/*--------------allgemeines-Screen-------------------*/
#example1 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

#example2 {
    display: grid;
    grid-template-columns: auto;
}

#example3 {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
}

#item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}

/*--------------container-Screen-------------------*/

#example4 {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
}

#example5 {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 150px 100px 200px;
}

#example6 {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    justify-content: space-evenly;
}

#example7 {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    justify-content: center;
}

#example8 {
    display: grid;
    grid-template-columns: auto auto auto;
}

#item2 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

#item3 {
    grid-column: 1 / span 3;
}

/*--------------items-Screen-------------------*/
#example9 {
    display: grid;
    grid-template-columns: auto auto auto auto;
}

#item4 {
    grid-area: 1 / 2 / 4 / 4;
}

#example10 {
    display: grid;
    grid-template-areas: 
    'header header header header header header'
    'nav main main main aside aside'
    'nav footer footer footer footer footer';
    gap: 10px;
}

#item5 {
    grid-area: header;
}

#item6 {
    grid-area: nav;
}

#item7 {
    grid-area: main;
}

#item8 {
    grid-area: aside;
}

#item9 {
    grid-area: footer;
}