Votre navigateur ne supporte pas cette démonstration
Mise en page CSS Grid layout :
1
2
3
4
5
6
1
2
3
4
5
6
8
9
10
11
12
13
14
15
Mise en page CSS Grid layout + subgrid :
1
2
3
4
5
6
1
2
3
4
5
6
8
9
10
11
12
13
14
15
<div class=subgrid-exemple>
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div class="subgrid">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
</div>
<div><span>8</span></div>
<div><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
<div><span>12</span></div>
<div><span>13</span></div>
<div><span>14</span></div>
<div><span>15</span></div>
</div>
*,
*::before,
*::after{
box-sizing: border-box
}
.subgrid-exemple {
max-width:800px;
margin: 2rem auto;
font-size:1.25rem;
color:white;
display: grid;
grid-template-columns: 1fr 2fr 3fr 2fr 1fr;
grid-template-rows: 1fr 2fr 2fr 1fr;
padding: 1rem;
gap: 1rem;
}
.subgrid-exemple div {
display:grid;
background: rgba(103, 83, 234, 0.6);
padding:1rem
}
.subgrid{
grid-column: 2 / 5;
grid-row: 2 / 4;
display:inherit;
grid-template-columns: subgrid;
gap: .5rem;
}
.subgrid div {
background-color: #6753ea;
}