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)