Search code examples
htmlcsscss-grid

Why are there not 2 grid-cells horizontally adjacent to one another?

.grid-container {
    display: grid;
    grid-template-columns: 2fr;
    grid-template-rows: 1fr;
}
<div class="grid-container">
  <span>1</span><span>2</span>
</div>

I'm expecting there to be 2 'grid-cells' horizontally adjacent from one another. Instead, they stack up vertically. Why is this?

I thought grid-template-columns/rows specified the dimensions & layout of grid-cells.

Solution

  • How grid works is like this.You first set number of columns by grid-template-columns. In your case there was only one column and one row. I changed it to two columns and it worked as expected.

    .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}
    <div class="grid-container">
  <span>1</span><span>2</span>
</div>

    QUICK TIP: You can always use Developer Window (CTRL+SHIFT+I) in your Browser to check how many grid items I have.