.grid {
    display: grid;
    border: 2px solid black;
    width: 500px;
    height: 300px;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 150px 150px; /* two rows to demonstrate row positioning */    
}

.item1 {
    background-color: lightblue;
    border: 2px dotted black;
}

.item2 {
    background-color: lightgreen;
    border: 2px dotted black;
}

.item3 {
    background-color: lightpink;
    border: 2px dotted black;
}

.item4 {
    background-color: lightyellow;
    border: 2px dotted black;
    /* test grid-row-start and grid-row-end: span both rows */
    grid-row-start: 1;
    grid-row-end: 3;
}

.item5 {
    background-color: lightgray;
    border: 2px dotted black;
}

.grid10 {
    display: grid;
    border: 2px solid blue;
    width: 500px;
    height: 300px;
    grid-template-rows: repeat(5, 50px); 
    margin: 20px 0;   
}

.item10 {
    background-color: lightblue;
    border: 2px dotted blue;
}

.item20 {

    background-color: yellowgreen;
    border: 2px dotted blue;
    /*grid-row-start: 2;*/
    /*grid-row-end: 4;*/
    /* same effect as above, but with the short hand keyword*/
    grid-row: 2 / 4;
}

.item30 {
    background-color: lightpink;
    border: 2px dotted blue;
}

.item40 {
    background-color: lightyellow;
    border: 2px dotted blue;
}

.item50 {
    background-color: lightgray;
    border: 2px dotted blue;
}


/* New grid for the new items. grid-column-start and grid-column-end and grid-column example */
.grid11 {
    display: grid;
    border: 2px solid green;
    width: 500px;
    height: 500px;
    grid-template-columns: repeat(5, 100px); 
    margin: 20px 0;   
}

/* grid-column-start and grid-column-end example */
.item11 {
    background-color: lightblue;
    border: 2px dotted green;
    grid-column-start: 2;
    grid-column-end: 4;
}

.item21 {
    background-color: yellowgreen;
    border: 2px dotted green;
    grid-column: 3 / span 2; /* same effect as above, but with the short hand keyword*/
}