How to Order and Align Items in Grid Layout

This tutorial demonstrates controlling item placement and alignment within CSS Grid Layout. We'll explore ordering items and aligning them both individually and as a group.

Previously, we covered Grid Layout basics, including element placement and the Grid auto-placement algorithm.

For optimal demonstration, use the latest versions of Firefox (version 52 or later) or Chrome (version 57 or later), both offering native Grid Layout support.

Key Concepts:

• The order property dictates item sequence in the grid, overriding the default DOM order. This is especially helpful with numerous or dynamically added items.
• Row-axis alignment uses justify-self (individual items) and justify-items (all items). justify-self aligns a single item; justify-items aligns all items within the grid.
• Column-axis alignment uses align-self (individual items) and align-items (all items). Both accept start, end, center, and stretch values.
• Overall grid alignment is controlled by justify-content (row axis) and align-content (column axis), applied to the grid container. These accept start, end, center, stretch, space-around, space-between, and space-evenly.

Controlling Item Order with order:

The order property specifies item placement sequence. By default, items follow their DOM order. However, order allows for customized arrangement, particularly beneficial with many or dynamically-added items.

Lower order values appear first; items with equal order values maintain their DOM order.

Example:

HTML:

<div class="container">
  <div class="item a">A</div>
  <div class="item b">B</div>
  <div class="item c">C</div>
  <div class="item d">D</div>
  <div class="item e">E</div>
  <div class="item f">F</div>
  <div class="item g">G</div>
  <div class="item h">H</div>
  <div class="item i">I</div>
  <div class="item j">J</div>
</div>

CSS (Illustrative Snippet):

.c { grid-row-start: 1; grid-row-end: 2; }
.e { grid-row-start: 1; grid-row-end: 3; }
.b, .j { order: 2; }
.a, .i { order: 3; }

Remember: Altering item order with order might affect accessibility. Screen readers and keyboard navigation may not reflect the visual changes.

Row-Axis Alignment (justify-self, justify-items):

justify-self aligns individual items, while justify-items aligns all items along the row axis. Both use start, end, center, and stretch.

Column-Axis Alignment (align-self, align-items):

align-self aligns individual items, and align-items aligns all items along the column axis, using start, end, center, and stretch.

Overall Grid Alignment (justify-content, align-content):

justify-content (row axis) and align-content (column axis) align the entire grid within its container. In addition to start, end, center, and stretch, they also accept space-around, space-between, and space-evenly.

Conclusion:

Mastering item ordering and alignment in CSS Grid provides precise layout control. Remember accessibility considerations when reordering items.

(FAQs section removed for brevity. The provided FAQs are already well-covered within the rewritten tutorial.)

The above is the detailed content of How to Order and Align Items in Grid Layout. For more information, please follow other related articles on the PHP Chinese website!