CSS Grid能否实现动态列数？PHP条件添加区块布局咨询

Absolutely! CSS Grid is perfect for this scenario—you can set up a fixed CSS layout that automatically adapts to whether there's one or two <section> elements, no need to tweak styles via PHP. Here's how to adjust your existing code:

Modified CSS Code #

main {
  display: grid;
  /* Create columns that fit automatically: each column is at least 50% wide */
  grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
  /* Center columns when there's only one section */
  justify-content: center;
  /* Optional: add space between sections when two exist */
  gap: 1rem;
  width: 100%;
}

section {
  max-width: 80%;
  /* Centers the section horizontally when it's the only child */
  margin: 0 auto;
  min-height: 100%;
}

How It Works #

Let’s break down the logic for both scenarios:

• Single Section: The auto-fit rule creates one column that takes up 100% of the <main> container. The <section> uses max-width: 80% to cap its width and margin: 0 auto to center itself within that column—exactly your original requirement.
• Two Sections: When PHP adds the second <section>, auto-fit creates two columns each at least 50% wide. Since two 50% columns fit perfectly in the container, each section takes up exactly 50% of the <main> width (the max-width:80% doesn’t kick in here because 50% is smaller than 80%). The sections sit side by side automatically.

PHP Example (Adding the Second Section) #

You can keep your PHP logic simple—just inject the second <section> whenever your condition is met:

<main>
  <section>First section content</section>
  <?php if ($someCondition) : ?>
    <section>Second dynamic section content</section>
  <?php endif; ?>
</main>

This setup keeps your CSS static while letting PHP control the number of sections, and Grid handles the layout adaptation seamlessly.

内容的提问来源于stack exchange，提问作者J. Doe