Aligning Grid Items Across the Entire Row/Column (Like Flex Items Can)

Aligning grid items across the entire row/column (like flex items can)

Flex and Grid are different animals, so a behavior that's simple in flex may not translate well to grid.

A flex item can center across the container because flex layout works with flex lines. A flex line is a row or column.

When a flex item is asked to center in a row/column, it has access to the available space on the entire line, from beginning to end.

In grid layout, however, rows and columns have to contend with something that flex lines don't: track walls (a/k/a grid lines). For example, in your code there are three columns. These columns divide the track into three separate sections, and grid items are confined to a section.

Therefore, a grid item cannot automatically be centered on a row using keyword alignment properties (such as justify-content or justify-self) because the track walls restrict movement.

It is possible to make a grid area span the entire row/column, which then clears the way across the entire track, allowing a grid item to be centered horizontally (justify-content: center) or vertically (align-self: center), but this behavior must be explicitly defined.

For the grid item to be centered across the row in a dynamic layout the container would need to have only one column (i.e., no dividers), or the item would need to be explicitly moved to the center using something like line-based placement. Otherwise, use flexbox.

How do you align flex items inside a css grid to its grid lines?

Your div has w-full class. w-full is width: 100%.

Then you have nested three nested div's:

<div class="col-start-2 col-span-10 relative w-full flex flex-row h-5">
    <div class="bg-red-500 w-1/3 mr-4"></div>
    <div class="bg-yellow-300 w-1/3 mr-4"></div>
    <div class="bg-red-500 w-1/3"></div>
</div>

So the above divs placed in <div class="col-start-2 col-span-10 relative w-full flex flex-row h-5"> and they are aligned prefectly
according their parent.

So if you want to align these div's, then you need put then inside grid, not in div:

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet"/>
<div class="container mx-auto">
  
  <div class="grid gap-4 grid-cols-12 h-40 my-5">
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
     <div class="bg-blue-300"></div>
    
      <div class="col-start-2 col-span-5 bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      
      <div class="col-start-2 col-span-4 bg-red-500">1</div>
      <div class="col-span-2 bg-yellow-300">2</div>
      <div class="col-span-2 bg-red-500">3</div>
  </div>

  
</div>

<script src="https://cdn.tailwindcss.com"></script>

<div class="my-12 flex flex-wrap justify-center gap-4">
  <div class="h-64 w-48 rounded-md bg-black"></div>
  <div class="h-64 w-48 rounded-md bg-black"></div>
  <div class="h-64 w-48 rounded-md bg-black"></div>
  <div class="h-64 w-48 rounded-md bg-black"></div>
  <div class="h-64 w-48 rounded-md bg-black"></div>
</div>

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(200px,100%), 1fr));
}

.child {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 3px solid #a07;
}

body {
  margin:0;
}

<div class="container">
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
</div>

.grid-container {  display: flex;  flex-wrap:wrap;  border:1px solid;  margin:2px;}
.grid-container>div {  height: 50px;  background: red;  margin: .5rem;  flex: 1 1 calc(33% - 1rem);}

<div class="grid-container">  <div></div>  <div></div>  <div></div></div><div class="grid-container">  <div></div>  <div></div>  <div></div>  <div></div></div><div class="grid-container">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>