Grid Auto Placement, Alignment and Subgrid
What Is It?
Grid can create implicit tracks for items beyond the explicit template. Alignment properties place content within cells or distribute the tracks themselves.
Properties, Tags and Attributes Explained
grid-auto-rows / grid-auto-columns: Set sizes for implicitly created tracks.grid-auto-flow: Chooses row or column auto placement; dense may visually fill earlier holes.justify-items / align-items: Align items within their grid areas along inline and block axes.place-items / place-self: Shorthands for paired alignment on a container or one item.subgrid: Lets a nested grid reuse tracks of its parent along the selected axis.justify-self: Aligns one grid item along the inline axis inside its grid area; it does not align an individual flex item.place-content: Shorthand for align-content and justify-content, distributing the collection of tracks when there is spare space.
Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.
Example 1: Implicit rows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Auto Placement, Alignment and Subgrid</title>
<style>
.demo > div { background: #dbeafe; padding: 12px; border: 1px solid #93c5fd; }
.demo { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(70px, auto); gap: 8px; }
</style>
</head>
<body>
<div class="demo"><div>One</div><div>Two</div><div>Three</div></div>
</body>
</html>What you see: The third item creates another row using the implicit row sizing rule.
Example 2: Center within a cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Auto Placement, Alignment and Subgrid</title>
<style>
.demo { display: grid; place-items: center; min-height: 160px; background: #e0e7ff; }
span { padding: 12px; background: #c7d2fe; }
</style>
</head>
<body>
<div class="demo"><span>Centered on both axes</span></div>
</body>
</html>What you see: The item is centered horizontally and vertically within the grid area.
Example 3: Share parent columns
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Auto Placement, Alignment and Subgrid</title>
<style>
.demo { display: grid; grid-template-columns: 90px 1fr; gap: 8px; }
.row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
.row > * { background: #dbeafe; padding: 8px; }
</style>
</head>
<body>
<div class="demo"><div class="row"><strong>Name</strong><span>Alex</span></div><div class="row"><strong>Role</strong><span>Frontend learner</span></div></div>
</body>
</html>What you see: Both nested rows align their labels and values to the parent column tracks.
Example 4: Create implicit columns
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Auto Placement, Alignment and Subgrid</title>
<style>
.grid { display: grid; grid-auto-flow: column; grid-auto-columns: 70px; grid-template-rows: repeat(2, 50px); gap: 8px; overflow-x: auto; }
.grid > div { padding: 8px; background: #dcfce7; }
</style>
</head>
<body>
<div class="grid"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div></div>
</body>
</html>What you see: Items fill down two rows before creating the next implicit 70px column. Use this for a horizontally growing collection.
Example 5: Align items and the track collection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Auto Placement, Alignment and Subgrid</title>
<style>
.grid { display: grid; grid-template-columns: 90px 90px; grid-auto-rows: 70px; height: 180px; place-content: center; justify-items: start; align-items: center; gap: 8px; background: #f1f5f9; }
span { background: #dbeafe; padding: 8px; }
.special { justify-self: end; place-self: end; }
</style>
</head>
<body>
<div class="grid"><span>Start</span><span class="special">End</span></div>
</body>
</html>What you see: place-content centers the tracks. Item alignment controls each item inside a cell, and place-self overrides both axes for the second item. Use these controls for compact dashboard panels.
When and Where to Use It
Use implicit row sizing for growing galleries, place-items for centering, and subgrid for aligned nested card or form content.
Common Mistake or Useful Tip
Dense auto placement may change visual order. Keep the DOM order meaningful and check your target browser support before relying on subgrid.
Try It Yourself
Change the parent first column from 90px to 120px.