Question 42437 in Html Question posted in
Some basic documentation can be found here.

How do I make this grid layout using css? – Html

I am trying to create a grid layout that has 4 items in it. I want the first item to be full width, while the second, third, and fourth items should have width divided equally. There should only be two rows. Which css properties will help me achieve this?

.grid-container {
  display: grid;
  grid-template-columns: 1fr repeat(3, auto);
  grid-template-rows: auto;
  grid-gap: 20px;
}

.item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

.item-1 {
  grid-column: 1 / span 3;
}
<div class="grid-container">
  <div class="item-1">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>
Tags:

4

Answers


  1. 0

    Depends how you want to lay them out, but the documentation here shows good examples of various layouts.

    .grid-container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr repeat(3, '100%');
  grid-gap: 20px;
}

.item-1 {
  background-color: green;
  grid-column: 1/4;
}

.item {
  grid-row: 2/3;
  background-color: red;
  padding: 20px;
  text-align: center;
}

    Should achieve what you intend to.

    Basically, grid-row: 2/3 means .item is in the 2nd row, but if you want 3 items in the 2nd row, that means there are actually 4 columns (this is how the grid system works). Equal width for .item is achieved automatically. So now .item-1 needs to widen to grid-column: 1/4 meaning it spans from column 1 – 4. I put width 100% for good measure and background colors for my own debugging purposes.

    Login or Signup to reply.
  2. 0

    first, if you want to specify a style on any class that contains a specific name in your case "item"

    so you can do the following:

    [class *="item"] {
    background-color: #ddd;
    padding: 20px;
    text-align: center;
}

    [class *="item"] it refers that any class the has word item.

    second, to fix your grid code you have to do the following:

    .grid-container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: auto;
  grid-gap: 20px;
}

    basically using repeat 3 areas each on with the auto width or you can use 1fr too.

    Login or Signup to reply.
  3. 0

    You want a grid that is 3 columns wide, with each column taking up what space it can (1fr).

    Then you just want to set the first item to span all 3 columns, which your CSS already does.

    This snippet gives the first item a background color so we can check it is spanning correctly.

    The snippet sets 2 rows each with the height determined by its content.

    <div class="grid-container">
  <div class="item-1">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>


<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    grid-gap: 20px;
  }
  
  .item {
    background-color: #ddd;
    padding: 20px;
    text-align: center;
  }
  
  .item-1 {
    grid-column: 1 / span 3;
    background: pink;
  }
</style>
    Login or Signup to reply.
  4. 0

    Please try this and let me know it that worked?

    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: auto;
        grid-gap: 20px;
    }
    .item {
        background-color: red;
        padding: 20px;
        text-align: center;
    }
    .item.item-1 {
        background-color: green;
        grid-column: 1/-1;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search