CSS Grid is being vertical-CodePudding

I'm new to CSS Grid and I want to create a grid of divs. I want the grids to be fill up horizontally--filling up the pink div, but instead they go vertical like in the snippet below. I've tried everything, how do I fix it

.mygrid
{
  background-color: pink;
  display: grid;
  gap: 2px;
  grid-template-columns: 30px 40px;
}

.item
{
 
  background-color: blue;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
  <div >8</div>
  <div >9</div>
  <div >10</div>
  <div >11</div>
  <div >12</div>
</div>

CodePudding user response：

You should define the columns to half and half, using the "fr" unit.

.mygrid
{
  background-color: pink;
  display: grid;
  gap: 2px;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.item
{
 
  background-color: blue;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
  <div >8</div>
  <div >9</div>
  <div >10</div>
  <div >11</div>
  <div >12</div>
</div>

CodePudding user response：

use grid-template-columns: auto auto; to fill the entire pink box, Visit https://codepen.io/Manmohan2301/pen/VwxqmqW

CodePudding user response：

Your problem comes from grid-template-columns property. You can use the auto param get the same size of columns. Follow this doc for more information : https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

.mygrid
{
  background-color: pink;
  display: grid;
  gap: 2px;
  grid-template-columns: auto auto auto;
}

.item
{
 
  background-color: blue;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
  <div >8</div>
  <div >9</div>
  <div >10</div>
  <div >11</div>
  <div >12</div>
</div>