移动端优先：CSS Grid内容居中及子元素等尺寸适配问题

核心问题分析 #

1. 原代码中移动端Grid同时设置多列和grid-template-areas单行排列，布局逻辑冲突导致place-content: center失效
2. 缺失768px断点配置，且1024px下的max-width:400px限制容器宽度，造成子元素被挤压缩小
3. 未给子元素设置最小宽度，窄屏或容器受限情况下会无限制缩小

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
/* 基础移动端布局 */
.skills{
    display: grid;
    gap: 1.5rem;
    /* 单列布局：子元素最小宽度280px，超出部分自适应容器 */
    grid-template-columns: minmax(280px, 1fr);
    /* Grid内容在容器内居中 */
    place-items: center;
    /* 容器本身居中，限制最大宽度避免过宽 */
    width: min(95%, 70rem);
    margin: 0 auto;
}
.content-head_links{
    display: none;
}
.skillz{
    border-radius: 10px;
    padding: 20px;
    box-shadow: -1px 1px 22px -1px rgba(202,202,202,0.75);
    -webkit-box-shadow: -1px 1px 22px -1px rgba(202,202,202,0.75);
    -moz-box-shadow: -1px 1px 22px -1px rgba(202,202,202,0.75);
    transition: 250ms;
    /* 子元素占满Grid单元格，保证尺寸一致 */
    width: 100%;
}
.skillz:hover{
    transform: translateY(5px);
}
.Top-skills{
    width: min(95%, 70rem);
    margin: 150px auto;
    text-align: center;
    position: relative;
}
/* 768px及以上屏幕：2列布局 */
@media screen and (min-width:768px){
    .skills{
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }
}
/* 1024px及以上屏幕：3列布局 */
@media screen and (min-width:1024px){
    .skills{
        grid-template-columns: repeat(3, minmax(280px, 1fr));
    }
}
</style>
<body>
    <div class="Top-skills">
    <div class="skills">
        <div class="skillz html">
            <img src="" alt="">
            <h3>html</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
        </div>
        <div class="skillz css">
            <img src="" alt="">
            <h3>css</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
        </div>
        <div class="skillz scss">
            <img src="" alt="">
            <h3>scss</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
        </div>
        <div class="skillz javascript">
            <img src="" alt="">
            <h3>javascript</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
        </div>
        <div class="skillz React">
            <img src="" alt="">
            <h3>React</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
        </div>
    </div>
</div>
</body>
</html>

关键修改点说明 #

• 移除冗余的grid-template-areas：无需手动指定子元素位置，依赖Grid自动布局更简洁
• Grid列数配置：用minmax(280px, 1fr)保证子元素有最小显示宽度，避免过度缩小；repeat()快速生成多列，确保子元素尺寸均等
• 容器居中控制：给.skills设置width: min(95%, 70rem); margin: 0 auto;，让Grid容器本身在页面中居中，内部内容自然对齐
• 子元素宽度占满：给.skillz加width:100%，确保每个子元素填满Grid单元格，保持尺寸一致
• 补充768px断点：针对平板尺寸设置2列布局，完善响应式覆盖范围

内容的提问来源于stack exchange，提问作者Emmanuel Maurice