CSS || 响应式网格

响应式网格系统

网格布局的作用在于更有效控制元素在网页中所占比例的大小。

比如,博客的留言板块:在屏幕较大时,占据屏幕25%的宽度,出现在博客文章右侧;在屏幕较小时,占据屏幕100%宽度,出现在博客文章的下侧

网格布局是一种实现这种布局需求的方法:将所有宽度分为固定的栏(列)数,从而更高效控制元素宽度

1 基本的网格系统

基本的网格系统包括:容器container、行元素rows、列元素columns和间隙gutter

CSS || 响应式网格

1.1 container

container的作用:设置整个网格的宽度。容器的宽度一般为100%,可以设置一个max-width

.grid-container {
    width: 100%;
    max-width: 1200px;    /* 可选 */
}

CSS || 响应式网格

1.2 rows

rows的作用:保持列元素column不会溢出到其他行。使用清除浮动的方式确保每个行元素保持在行元素中

/* 确保row元素内的column元素不会溢出到其他行 */
.row::after,
.row::before {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

1.3columns

column是网格系统中最复杂的部分,包括列元素定位方式列元素宽度响应式设计需要。

列元素定位

floatdisplay:inline-block;display:table;display:flex;均可实现列元素定位。先使用float:最常用的并且容易出错。

  • 如果列元素是空的,浮动的列元素会堆在其他元素的顶部。为列元素设置最小高度1px可以避免

[class*="col-"] {
    float: left;
    min-width: 1px;
}

列元素宽度

  1. 列元素的宽度通过容器宽度/列数计算而来。容器宽度设置为100%,需要分成6列时,每列的宽度16.66%。

    [class*="col-"] {
        float: left;
        min-width: 1px;
        width: 16.66%;
    }
  2. 如果要设置两列元素的宽的一个section,需要创建一个2倍宽的列元素:通过组合,可以创建出多种宽度

    • 只需要考虑使用列元素组合时,任何一行中列元素增加到6个时的情况

      /* 组合多列的宽度 */
        .col-1 {
          width: 16.66%;
      }
      .col-2 {
          width: 33.33%;
      }
      .col-3 {
          width: 50%;
      }
      .col-4 {
          width: 66.664%;
      }
      .col-5 {
          width: 83.33%;
      }
      .col-6 {
          width: 100%;
      }

列间距gutter

  • 使用border-box为设置百分比宽度的元素设置固定padding。使用border-box模型可以很轻松创建列宽

.grid-container {
    width: 100%;
    max-width: 1200px;     
    box-sizing: border-box;   /* 需要在百分比宽度中使用固定的padding值 */
}

[class*="col-"] {
    float: left;
    min-width: 1px;
    width: 16.66%;
    /* 设置列间距 */
    padding: 12px;
}

CSS || 响应式网格

1.4 总结

到此已经完成了一个基础的网格布局系统,可以简单使用。

CSS || 响应式网格

<div class="grid-container outline">
    <div class="row">
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
    </div>
    <div class="row">
        <div class="col-2"><p>col-2</p></div> 
        <div class="col-2"><p>col-2</p></div> 
        <div class="col-2"><p>col-2</p></div> 
    </div> 
    <div class="row">
        <div class="col-3"><p>col-3</p></div> 
        <div class="col-3"><p>col-3</p></div> 
    </div> 
</div>

<style>
* {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}

/* 定义网格容器,设置容器的宽度 */
.grid-container {
    width: 100%;
}
/* 确保row元素内的column元素不会溢出到其他行 */
.row::after,
.row::before {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

/* 避免浮动元素堆叠 */
/* 设置每列元素宽度 */
[class*="col-"] {
    float: left;
    min-width: 1px;
    width: 16.66%;
    /* 设置列间距 */
    padding: 12px;

    background: #f66;
}

/* 组合多列的宽度 */
.col-1 {
    width: 16.66%;
}
   .col-2 {
    width: 33.33%;
}
.col-3 {
    width: 50%;
}
.col-4 {
    width: 66.664%;
}
.col-5 {
    width: 83.33%;
}
col-6 {
    width: 100%;
}

/* outline外轮廓设置,突出元素 */
.outline, .outline * {
    outline: 1px solid #f6a1a1;
}

/* 其他样式,便于观察 */
 /*-- some extra column content styling --*/
[class*='col-'] > p {
     background-color: #FFC2C2; 
     padding: 0;
     margin: 0;
     text-align: center; 
     color: white; 
}
</style>

2 实现响应式

只需要调整列元素宽度,便可以调整网页布局适配移动端。

  1. 屏幕宽度小于800px时,列宽变为原来的2倍。

  2. 问题:col-4col-5col-6的宽度会超过100%,需要将其显示设置为100%。

    • 并且col-1出现在col-5之后时:需要将其宽度设置为100%

    • col-2出现在最后一个元素时:需要将其宽度设置为100%

  3. 使用媒体查询来解决不同尺寸屏幕应用不同样式

不处理col-1col-2

所以需要处理两种特殊情况:

  • col-1出现在col-5后;.row .col-2:last-of-type{ width: 100%; }

  • col-2出现在最后后;.row .col-5 ~ .col-1{ width: 100%; }

@media all and (max-width: 800px) {
    .col-1 {
    width: 33.33%;
    }
    .col-2 {
        width: 50%;
    }
    .col-3 {
        width: 83.33%;
    }
    .col-4 {
        width: 100%;
    }
    .col-5 {
        width: 100%;
    }
    .col-6 {
        width: 100%;
    }

    /* .row .col-2:last-of-type{
         width: 100%; 
    }
    .row .col-5 ~ .col-1{
        width: 100%; 
    } */
}

CSS || 响应式网格
CSS || 响应式网格

元素宽度显著小于800px时,可以让除了col-1之外的元素都为100%

@media all and (max-width:650px){
        .col-1{ width: 50%;}
        .col-2{ width: 100%;}
        .col-3{ width: 100%;}
        .col-4{ width: 100%;}
        .col-5{ width: 100%;}
        .col-6{ width: 100%;}
}

相关推荐