CSS布局问题求助：4个Article元素无法实现指定排列效果

要实现你想要的「首元素居中独占一行，后三个元素均匀分布在下一行」的布局，你可以通过CSS Grid或者Flexbox两种方式修改现有代码，以下是具体方案：

方案1：使用CSS Grid（推荐，布局更直观） #

Grid非常适合这种非对称的行列布局，只需修改section和第一个article的样式：

section {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 分成3个等宽列 */
    gap: 1.5rem; /* 可选：添加元素间的间距，提升美观 */
}

/* 让第一个article占据中间列，独占一行 */
article:first-child {
    grid-column: 2 / 3;
}

方案2：使用Flexbox（基于原有代码修改） #

如果更倾向于使用Flexbox，可以通过flex-wrap换行，让首元素占满一行并居中：

section {
    display: flex;
    flex-wrap: wrap; /* 允许元素换行 */
    gap: 1.5rem; /* 可选：添加元素间的间距 */
}

/* 首元素占满整行并居中 */
article:first-child {
    flex-basis: 100%; /* 强制占满一行宽度 */
    text-align: center; /* 让元素内的文字居中（可选） */
}

/* 后三个元素平分剩余空间 */
article:not(:first-child) {
    flex: 1;
}

替换你原有代码中section和article的样式，即可实现目标布局。

内容的提问来源于stack exchange，提问作者Ahmad Alsamau