通过此修订，一旦包装在 <main> 标记（或 <section>、<article>...）中，上述 HTML 可能会变成如下所示：
Unsere Immobilien
PlaceKitten image: 1
PlaceKitten image: 2
PlaceKitten image: 3
PlaceKitten image: 4
PlaceKitten image: 5
PlaceKitten image: 6
将其与多列布局一起使用，并在 CSS 中添加解释性注释：
/* CSS custom properties used to provide common theming
to multiple elements: */
:root {
--commonSpacing: 1em;
}
/* a simple CSS reset to remove default margins,
and padding; ensuring all browsers use the
same sizing algorithm for content, and also
applying the same font-size and font-family: */
*,
::before,
::after {
box-sizing: border-box;
font-family: system-ui;
font-size: 16px;
margin: 0;
padding: 0;
}
/* to emphasise the heading: */
h4 {
font-size: 1.8em;
margin-block: calc(0.5 * var(--commonSpacing));
text-align: center;
}
main {
/* setting the size of the inline axis (width, in English and
Latin languages) to 80 viewport width units, with a minimum
size of 30 root-em units, and a maximum size of 1300 pixels: */
inline-size: clamp(30rem, 80vw, 1300px);
/* centering the element on the inline axis: */
margin-inline: auto;
}
ul {
/* using multi-column layout,
ensuring two columns: */
column-count: 2;
/* removing default list-markers: */
list-style-type: none;
/* centering the elements
within the
: */
text-align: center;
}
li {
/* ensuring that the
doesn't have
its contents spread over columns,
leaving unsightly orphans at the
end, or beginning, of a column: */
break-inside: avoid;
/* spacing the elements out: */
margin-block-end: var(--commonSpacing);
}
/* CSS custom properties used to provide common theming
to multiple elements: */
:root {
--commonSpacing: 1em;
}
/* a simple CSS reset to remove default margins,
and padding; ensuring all browsers use the
same sizing algorithm for content, and also
applying the same font-size and font-family: */
*,
::before,
::after {
box-sizing: border-box;
font-family: system-ui;
font-size: 16px;
margin: 0;
padding: 0;
}
main {
/* setting the size of the inline axis (width, in English and
Latin languages) to 80 viewport width units, with a minimum
size of 30 root-em units, and a maximum size of 1300 pixels: */
inline-size: clamp(30rem, 80vw, 1300px);
/* centering the element on the inline axis: */
margin-inline: auto;
}
/* to emphasise the heading: */
h4 {
font-size: 1.8em;
margin-block: calc(0.5 * var(--commonSpacing));
text-align: center;
}
ul {
/* using grid layout: */
display: grid;
/* spacing adjacent elements: */
gap: var(--commonSpacing);
/* defining two columns, each taking one fraction of
the available space:*/
grid-template-columns: repeat(2, 1fr);
list-style-type: none;
text-align: center;
}
/* CSS custom properties used to provide common theming
to multiple elements: */
:root {
--commonSpacing: 1em;
}
/* a simple CSS reset to remove default margins,
and padding; ensuring all browsers use the
same sizing algorithm for content, and also
applying the same font-size and font-family: */
*,
::before,
::after {
box-sizing: border-box;
font-family: system-ui;
font-size: 16px;
margin: 0;
padding: 0;
}
main {
/* setting the size of the inline axis (width, in English and
Latin languages) to 80 viewport width units, with a minimum
size of 30 root-em units, and a maximum size of 1300 pixels: */
inline-size: clamp(30rem, 80vw, 1300px);
/* centering the element on the inline axis: */
margin-inline: auto;
}
/* to emphasise the heading: */
h4 {
font-size: 1.8em;
margin-block: calc(0.5 * var(--commonSpacing));
text-align: center;
}
ul {
/* using flexbox layout: */
display: flex;
/* shorthand for:
flex-direction: row;
flex-wrap: wrap; */
flex-flow: row wrap;
/* setting a gap between adjacent elements: */
gap: var(--commonSpacing);
/* removing default list-markers: */
list-style-type: none;
}
li {
/* allowomg the
to expand to take up
more room: */
flex-grow: 1;
/* setting the size of the element to be
45% of that of the parent; flex-basis
always refers to the inline-axis of flex-items,
which can be modified by updating the
flex-direction of the parent: */
flex-basis: 45%;
/* centering the content within the
