0

I am trying to do a layout using CSS where I have a grid of 2 columns and 2 rows.

The first column should have a width of 1fr and the second column 4fr.

I tried using auto-fit:

HTML

<body>
  <header>
    <div class="item1">GRID ITEM 1</div>
    <div class="item2">GRID ITEM 2</div>
    <div class="item1">GRID ITEM 3</div>
    <div class="item2">GRID ITEM 4</div>
  </header>
</body>

CSS

header {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    div {
      border: 1px solid;
    }

I am having trouble setting 2 different column widths (1fr, 3fr) only using auto-fit and auto-fill when in desktop screen mode. Is there any way to achieve this without using media queries? Or auto-fit and auto-fill are only used when columns are of the same width?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Sam
  • 375
  • 1
  • 5
  • 15

1 Answers1

0

So if I understood right. Your layout should have 5 columns (1 x 1fr , 1 x 4fr) and 2 rows. Here is something that MIGHT answer your question.

.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 1fr);
height: 300px;
}

.item1 { grid-area: 1 / 1 / 2 / 2; background: red;}
.item2 { grid-area: 1 / 2 / 2 / 6; background: green; }
.item3 { grid-area: 2 / 1 / 3 / 2; background: yellow; }
.item4 { grid-area: 2 / 2 / 3 / 6; background: blue; }
<div class="parent">
<div class="item1"> </div>
<div class="item2"> </div>
<div class="item3"> </div>
<div class="item4"> </div>
</div>
Evik Ghazarian
  • 1,803
  • 1
  • 9
  • 24
  • Yeah technically the layout should have 5 columns as you said. But my question was, can it be achieved using auto-fit or auto-fill without using media queries? – Sam May 04 '20 at 19:15