相关文章：

1. CSS：@media 媒体查询语法、媒体类型

2. CSS：@media screen实现网页布局的自适应

3. CSS教程：网格布局（grid-template-columns、fr单位）

提出问题

浏览器宽度 大于 800px 时，显示 2列 网格，且宽度是 800px，居中显示，如下图：

浏览器宽度 小于 800px 时，显示 1列 网格，宽度是 100%，如下图：

解决

CSS：

<style>
    .grid-container{
        margin: 0 auto;
        width: 800px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        background-color: blue;
        padding: 3px; /*给网格设置内边距，实现外边框效果*/
        grid-gap: 1px; /*设置单元格之间的间距，实现内边框效果*/
    }
    .grid-container div{
        background-color: gray;
        text-align: center;
        padding: 20px 0; /*通过padding设置行高*/
    }
    /* 当浏览器宽度小于800，网格变成1列,100%宽度 */
    @media screen and (max-width:800px) {
        .grid-container{
            width: 100%;
            grid-template-columns: 1fr;
        }
    }
</style>

HTML：

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

原文出处：/show_1IX7TrD3atXw.html