0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>The grid-template-areas property allows certain areas to be marked as empty.</p>
1
<p>The grid-template-areas property allows certain areas to be marked as empty.</p>
2
<p>The period character . is used for this instead of the alphabetic name of the area.</p>
2
<p>The period character . is used for this instead of the alphabetic name of the area.</p>
3
<p>For example, take the code from a previous topic where we had a grid consisting of three columns.</p>
3
<p>For example, take the code from a previous topic where we had a grid consisting of three columns.</p>
4
grid-template-areas: "red yellow green" "red yellow green" "red yellow green";<p>If we only want the last green cell to remain in the first row, then replace red and yellow on the first line with periods:</p>
4
grid-template-areas: "red yellow green" "red yellow green" "red yellow green";<p>If we only want the last green cell to remain in the first row, then replace red and yellow on the first line with periods:</p>
5
grid-template-areas: ". . green" "red yellow green" "red yellow green";<p>We obtain the desired result:</p>
5
grid-template-areas: ". . green" "red yellow green" "red yellow green";<p>We obtain the desired result:</p>
6
<p>Let’s add empty areas to the example from the previous assignment.</p>
6
<p>Let’s add empty areas to the example from the previous assignment.</p>