• 24小时服务热线:400-088-1128

当前位置 南顺网络>> 知识拓展

一行css代码搞定响应式布局

HTML 代码:

<div class="container">
  <div>1div>
  <div>2div>
  <div>3div>
  <div>4div>
  <div>5div>
  <div>6div>
div>
css 代码:
.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

基础响应单位: fraction

CSS 栅格布局带来了一个全新的值:fraction单位,fraction单位通常简写为fr,它允许你根据需要将容器拆分为多个块。

让我们将每一列更改为一个 fraction 单位宽:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px 50px;
}

结果是栅格布局将会把整个宽度分成三个 fraction,每列占据一个 fraction 单位,