Search code examples
htmlcsscss-grid

css grid layout practise

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?

Solution

  • 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,