DEV Community

MoonLight
MoonLight

Posted on

Grid

grid examples
Image description

Image description

also we can write like this

.container{
    display:grid;
    /*grid-template-rows: 100px 100px 100px;*/
    grid-template-rows:repeat(3,100px);
    /*grid-template-columns: 100px 100px;*/
    grid-template-columns: repeat(2,100px);
    border: 3px solid lightgray;
}
Enter fullscreen mode Exit fullscreen mode


Image description

reminder
aligning items
Image description

.container{
    display:grid;
    /*grid-template-rows: 100px 100px 100px;*/
    grid-template-rows:repeat(3,100px);
    /*grid-template-columns: 100px 100px;*/
    grid-template-columns: repeat(2,100px);
    border: 3px solid lightgray;
    /* 💛 */
    justify-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Image description

.container{
    display:grid;
    /*grid-template-rows: 100px 100px 100px;*/
    grid-template-rows:repeat(3,100px);
    /*grid-template-columns: 100px 100px;*/
    grid-template-columns: repeat(2,100px);
    border: 3px solid lightgray;
    /* 💛 */
    justify-items: center;
    align-items: center;
}  
Enter fullscreen mode Exit fullscreen mode

Image description

.container{
    display:grid;
    /*grid-template-rows: 100px 100px 100px;*/
    grid-template-rows:repeat(3,100px);
    /*grid-template-columns: 100px 100px;*/
    grid-template-columns: repeat(2,100px);
    border: 3px solid lightgray;
    /* 1️⃣ */
    justify-items: center;
    align-items: center;
    /* 2️⃣ */
    justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Image description

Top comments (0)