I am trying to layout a simple web application that i am building using CSS grid.

I need help understanding where I am going wrong with the CSS grid. for some reason the browser is crossing out the css grid rules that I am defining.

Firefox Developer Screenshot

Also see my code for both HTML and CSS

HTML Snippet

    /* Main Container */
.ipad {
    width: 1024px;
    height: 1024px;
    background-color: antiquewhite;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 3fr;
}

/* 
Grid Layout */
.firstbox {
    background-color: blue;
    height: 80px;
    border-radius: 20px;
    margin: 10px 10px 10px 10px;
    grid-column-start: 1fr;
    grid-column-end: 2fr;
    grid-row-start: 1fr;
    grid-row-end: 3fr;

}

.topright {
    background-color: blueviolet;
    border-radius: 20px;
    margin: 10px 10px 10px 10px;
    height: 80px;
    grid-column-start: 2fr;
    grid-column-end: 3fr;
}

.bottomright {
    background-color: cadetblue;
    border-radius: 20px;
    margin: 10px 10px 10px 10px;
    height: 80px;
    grid-column-start: 2fr;
    grid-column-end: 3fr;
    grid-row-start: 2fr;
}

CodePudding user response：

Your units are invalid. Rules like grid-column-start take a number (e.g. 1) and you're giving it values with units like 1fr.

It doesn't start at column "1 fraction of the available space", it starts at column 1.

grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;

CodePudding user response：

Thanks for the input, but i am still having some issues. This is the layout I am trying to get

Desired