css grid layout practise

Question

I am new to CSS grid and I want to practice on it I want to make

this ,

but my second and third divs don't positioned correctly

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr)
  grid-auto-rows: 100px;
  grid-gap: 1em;
}

.grid-wrapper > div img {
  width: 100%;
  height: 100%;
}

.grid-wrapper > div:nth-child(1) {
  grid-column: 1/4;
}

.grid-wrapper > div:nth-child(2) {
  grid-row: 1/2;
  grid-column: 4/5;
}

.grid-wrapper > div:nth-child(3) {
  grid-row: 2/3;
  grid-column: 4/5;
}

<div class="grid-wrapper">
  <div><img src="https://placehold.co/200x150/1aacff/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/f700ff/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff5500/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff0059/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/00ff2f/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff2efc/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/001191/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/1aacff/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff5500/FFFFFF?text=Hello+World&font=raleway" /></div>
</div>

Here is the result:

Result

How to fix it?

Ranjeet Eppakayala · Accepted Answer · 2020-08-26 17:09:25Z

Main changes:

.grid - wrapper > div: nth - child(1) {
    grid - column: 1 / 4;
    grid - row: 1 / 3;    // added row position 1 / 3;
  }
  .grid - wrapper > div: nth - child(2) {
    grid - row: 1 / 2;
    grid - column: 4 / 6; // updated 4/5 > 4/6
  }
  .grid - wrapper > div: nth - child(3) {
    grid - row: 2 / 3;
    grid - column: 4 / 6; // updated 4/5 > 4/6
  }

.grid-wrapper {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(4, 1fr); // forgot to add semi colon at the end
      grid-auto-rows: 100px;
      grid-gap: 1em;
    }

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 1em;
}

.grid-wrapper>div img {
  width: 100%;
  height: 100%;
}

.grid-wrapper>div:nth-child(1) {
  grid-column: 1/4;
  grid-row: 1/3;
}

.grid-wrapper>div:nth-child(2) {
  grid-row: 1/2;
  grid-column: 4/6;
}

.grid-wrapper>div:nth-child(3) {
  grid-row: 2/3;
  grid-column: 4/6;
}

<div class="grid-wrapper">
  <div><img src="https://placehold.co/200x150/1aacff/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/f700ff/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff5500/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff0059/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/00ff2f/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff2efc/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/001191/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/1aacff/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff5500/FFFFFF?text=Hello+World&font=raleway" /></div>
</div>

Recommendation: Use Firefox developer tool for inspecting GRID CSS

The Grid Inspector allows you to examine CSS Grid Layouts using the Firefox DevTools, discovering grids present on a page, examining and modifying them, debugging layout issues,

tacoshy · Accepted Answer · 2020-08-26 16:39:17Z

body {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column: 15px;
  column-gap: 15px;
  grid-auto-rows: auto;
  grid-row-gap: 15px;
  grid-template-areas:
    "box1 box1 box1 box3 box3"
    "box1 box1 box1 box4 box4"
    "box2 box2 box2 box2 box2"
    "box5 box6 box7 box8 box9";
  padding: 15px;
}

div {
  min-height: 100px;
  background-color: blue;
}

#boxA {
  grid-area: box1;
}

#boxB {
  grid-area: box2;
}

#boxC {
  grid-area: box3;
}

#boxD {
  grid-area: box4;
}

#boxE {
  grid-area: box5;
}

#boxF {
  grid-area: box6;
}

#boxG {
  grid-area: box7;
}

#boxH {
  grid-area: box8;
}

#boxI {
  grid-area: box9;
}

<body>
  <div id="boxA">Box 1</div>
  <div id="boxB">Box 2</div>
  <div id="boxC">Box 3</div>
  <div id="boxD">Box 4</div>
  <div id="boxE">Box 5</div>
  <div id="boxF">Box 6</div>
  <div id="boxG">Box 7</div>
  <div id="boxH">Box 8</div>
  <div id="boxI">Box 9</div>
</body>

best to achieve with setting up the grid and then use grid-template-areas like I did.

Temani Afif · Accepted Answer · 2020-08-26 19:11:53Z

You can simplify the code like below:

body {
  height: 100vh;
  margin: 0;
}

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-flow:dense;
  grid-auto-rows: 100px;
  grid-gap: 1em;
}

.grid-wrapper>div img {
  width: 100%;
  height: 100%;
}

.grid-wrapper>div:nth-child(1) {
  grid-column: span 3; /* take 3 columns */
  grid-row: span 2; /* take 2 rows */
}

.grid-wrapper>div:nth-child(3),
.grid-wrapper>div:nth-child(4){
  grid-column: span 2; /* take 2 columns */
}

.grid-wrapper>div:nth-child(2) {
  grid-column: 1/-1; /* take all columns */
}

<div class="grid-wrapper">
  <div><img src="https://placehold.co/200x150/1aacff/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/f700ff/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff5500/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff0059/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/00ff2f/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff2efc/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/001191/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/1aacff/FFFFFF?text=Hello+World&font=raleway" /></div>
  <div><img src="https://placehold.co/200x150/ff5500/FFFFFF?text=Hello+World&font=raleway" /></div>
</div>

نور · Accepted Answer · 2020-09-01 05:01:19Z

.one { grid-area: one; }
.two { grid-area: two; }
.three { grid-area: three; }
.four { grid-area: four; }
.five { grid-area: five; }
.six { grid-area: six; }
.seven { grid-area: seven; }
.eight { grid-area: eight; }
.nine { grid-area: nine; }
.grid-container {
  display: grid;
  grid-template-areas:
    'one one one two  two'
    'one one one three three '
    'four four four four four '
    'five six seven eight nine  ';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<div class="grid-container">
  <div class="one">one</div>
  
  <div class="two">two</div>  
  <div class="three">three</div>
  <div class="four">four</div>
  <div class="five">five</div>
  <div class="six">six</div>
  <div class="seven">seven</div>
  <div class="eight">eight</div>
  <div class="nine">nine</div>
</div>

user13907403 · Accepted Answer · 2020-08-26 16:56:37Z

Plesae try this

.grid-wrapper {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 grid-template-rows: repeat(4, 1fr);
 grid-auto-rows: 50px;
 grid-gap: 1em;
}
.grid-wrapper > div img {
 width: 100%;
 height: 100%;
}
.grid-wrapper > div:nth-child(1) {
 grid-column: 1/ 4;
 grid-row:1/3;
 
}
.grid-wrapper > div:nth-child(2) {
 
 grid-column: 1/ 6;
 grid-row:3 / 6;
 
}
.grid-wrapper > div:nth-child(3) {
 grid-column:4/6;
 grid-row:1/2;
}
.grid-wrapper > div:nth-child(4) {
 grid-column:4/6;
 grid-row:2/ 2;
}

<div class="grid-wrapper">
 <div><img src="https://placehold.co/200x150/1aacff/FFFFFF?text=1&font=raleway" /></div>
 <div><img src="https://placehold.co/200x150/f700ff/FFFFFF?text=2&font=raleway" /></div>
 <div><img src="https://placehold.co/200x150/ff5500/FFFFFF?text=3&font=raleway" /></div>
 <div><img src="https://placehold.co/200x150/ff0059/FFFFFF?text=4&font=raleway" /></div>
 <div><img src="https://placehold.co/200x150/00ff2f/FFFFFF?text=5&font=raleway" /></div>
 <div><img src="https://placehold.co/200x150/ff2efc/FFFFFF?text=6&font=raleway" /></div>
 <div><img src="https://placehold.co/200x150/001191/FFFFFF?text=7&font=raleway" /></div>
 <div><img src="https://placehold.co/200x150/1aacff/FFFFFF?text=8&font=raleway" /></div>
 <div><img src="https://placehold.co/200x150/ff5500/FFFFFF?text=9&font=raleway" /></div>
</div>

Jagruti Rakholiya · Accepted Answer · 2020-08-26 16:15:59Z

You can achive this by using grid-column-start & grid-column-end Attribute

.grid-wrapper {
               display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 1em;

            }
            .grid-wrapper > div img {
                width: 100%;
                height: 100%;
            }
           
            .grid-wrapper > div:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}
.grid-wrapper > div:nth-child(2) {
  grid-column-start: 4;
  grid-column-end: 6;
 
}
.grid-wrapper > div:nth-child(3) {
  grid-column-start: 4;
  grid-column-end: 6;

}
.grid-wrapper > div:nth-child(4) {
  grid-column-start: 1;
  grid-column-end: 6;

}

 <div class="grid-wrapper">
            <div><img src="https://placehold.co/200x150/1aacff/FFFFFF?text=Hello+World&font=raleway" /></div>
            <div><img src="https://placehold.co/200x150/f700ff/FFFFFF?text=Hello+World&font=raleway" /></div>
            <div><img src="https://placehold.co/200x150/ff5500/FFFFFF?text=Hello+World&font=raleway" /></div>
            <div><img src="https://placehold.co/200x150/ff0059/FFFFFF?text=Hello+World&font=raleway" /></div>
            <div><img src="https://placehold.co/200x150/00ff2f/FFFFFF?text=Hello+World&font=raleway" /></div>
            <div><img src="https://placehold.co/200x150/ff2efc/FFFFFF?text=Hello+World&font=raleway" /></div>
            <div><img src="https://placehold.co/200x150/001191/FFFFFF?text=Hello+World&font=raleway" /></div>
            <div><img src="https://placehold.co/200x150/1aacff/FFFFFF?text=Hello+World&font=raleway" /></div>
            <div><img src="https://placehold.co/200x150/ff5500/FFFFFF?text=Hello+World&font=raleway" /></div>
        </div>

Collectives™ on Stack Overflow

css grid layout practise

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related