How Can I Rearrange Columns in a CSS Grid Layout?

Changing the Column Order in a CSS Grid

In CSS Grid, you can define the layout of a grid by specifying the number of columns and rows using the grid-template-columns and grid-template-rows properties. However, rearranging the order of these columns can be a challenge.

Solution: Grid Auto Flow with the dense Keyword

While there are multiple ways to rearrange grid items, using the dense keyword with the grid-auto-flow property offers a simple and efficient solution:

<code class="css">grid-auto-flow: dense;</code>

The dense keyword tells the browser to automatically fill empty grid cells with grid items, moving them to fill in the gaps while maintaining the specified order.

Applying to the Example

By adding the dense keyword to the existing grid class, the columns will automatically rearrange on a mobile layout to match the desired order:

<code class="css">.my-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: 15% 1fr 25%;
  grid-template-rows: 1fr; /* For as many rows as you need */
  grid-gap: 10px;
  border: 2px solid #222;
  box-sizing: border-box;
}</code>

Result:

---------------------------------------------
|     col 1             |      col 3        |
|                       |                   |
---------------------------------------------
|                     col 2                 |
---------------------------------------------

This solution provides a convenient and robust approach to changing the column order without resorting to pre-processors.

The above is the detailed content of How Can I Rearrange Columns in a CSS Grid Layout?. For more information, please follow other related articles on the PHP Chinese website!