xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

1 line of CSS Layouts

10 modern layouts in 1 line of CSS

1. 绝对居中布局


<div class="container" >
  <div class="item" contenteditable>✅</div>
 </div>

.container {
  display: grid;
  place-items: center;
}

place-items:

place-items 是和简写形式

align-items 属性控制垂直对齐
justify-items 属性控制水平对齐


place-items: <align-items> <justify-items>;

place-items: center;
// 等同于
place-items: center center;
// 等同于
align-items: center;
justify-items: center;

2. 并列式多栏布局

<div class="contianer">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>


.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.item {
    /* flex-grow、flex-shrink、flex-basis */
    flex: 1 1 150px; 
    /*  Stretching: */
    margin: 5px;
}

.item {
    /* flex-grow、flex-shrink、flex-basis */
    flex: 0 1 150px; 
     /*  No stretching: */
    margin: 5px;
}

flex: 0 1

flex 是、、简写形式

flex-shrink：如果容器宽度不足，项目是否可以缩小;
flex-grow：如果容器有多余宽度，项目是否可以扩大;
flex-basis：项目的初始宽度;


flex: <flex-grow> <flex-shrink>  <flex-basis>;

flex: 1 1 150px;
// 等同于
flex-grow: 1;
flex-shrink: 1;
flex-basis: 150px;

flex: 0 1 150px
// 等同于
flex-grow: 0;
flex-shrink: 1;
flex-basis: 150px;

3. 左右两栏式布局

侧边栏固定宽度(可以在一定范围内动态变化)，主栏宽度自适应

<div class="container">
  <div class="item" contenteditable>
       Min: 150px / Max: 25%
  </div>
  <div class="item" contenteditable>
      This element takes the second grid position (1fr), meaning
       it takes up the rest of the remaining space.
  </div>
</div>

.container {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

grid-template-columns: minmax(, ) ...

CSS Units Functions: calc(), minmax(), var(--variable), repeat()

grid-template-columns 指定页面分成两列

第一列的宽度是 minmax(150px, 25%)，即最小宽度为150px，最大宽度为总宽度的25%;
第二列为 1fr，即所有剩余宽度;

grid-template 是、、简写形式


// 等同于
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows:

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template

CSS 1fr

CSS Grid Layout 引入了一个新的长度单位，称为 fr，它是“分数”的缩写。
MDN 将 fr 单位定义为一个表示网格容器中可用空间的一部分的单位。

Fractional unit / 小数单位

.container {
  display: grid;
   800px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 150px 150px;
  grid-gap: 1rem;
}

// 等同于

.container {
  display: grid;
   800px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 150px);
  grid-gap: 1rem;
}

https://mozilladevelopers.github.io/playground/css-grid/04-fr-unit/

https://codepen.io/xgqfrms/pen/bGeydOY

4. 三明治布局, 上中下布局

页眉、内容区、页脚

header main footer

布局始终会占满整个页面高度

<div class="container">
  <header class="item" contenteditable>
     Header Content
  </header>
  <main class="itemn" contenteditable>
     Main Content
  </main>
  <footer class="item" contenteditable>
     Footer Content
   </footer>
</div>

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

auto 由内容的高度决定
1fr 占用所有剩余空间的比例

grid-template-rows 指定垂直方向布局，这里是从上到下划分三部分。

第一部分（页眉）和第三部分（页脚）的高度都为 auto，即本来的内容高度；
第二部分（内容区）的高度为 1fr，即剩余的所有高度，这可以保证页脚始终在容器的底部。


// 等同于

5. 圣杯布局

页眉
内容区(左边栏、主栏、右边栏)
页脚

<div class="containert">
  <header class="section">
    Header
  </header>
  <div class="left-side section" contenteditable>
    Left Sidebar
  </div>
  <main class="section" contenteditable>
    Main Content
  </main>
  <div class="right-side  section" contenteditable>
    Right Sidebar
  </div>
  <footer class="section">
      Footer
  </footer>
</div>


.container {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
}
header {
    padding: 2rem;
    grid-column: 1 / 4;
}
.left-side {
    grid-column: 1 / 2;
}
main {
    grid-column: 2 / 3;
}
.right-side {
    grid-column: 3 / 4;
}
footer {
    grid-column: 1 / 4;
}

grid-template 是 / 简写形式

grid-template-rows（垂直方向) 山下布局
grid-template-columns（水平方向）左右布局

grid-template: auto 1fr auto / auto 1fr auto; 表示页面在垂直方向和水平方向上，都分成三个部分

首先垂直方向将布局划分为 (上中下) 3 部分
其次水平方向再将 (上中下) 三部分，分别划分为 (左中右) 3 部分

grid-template: auto 1fr auto / auto 1fr auto;
// 等同于
grid-template-columns auto 1fr auto;
grid-template-rows:: auto 1fr auto;

转换成三明治布局, 上中下布局 ???

<div class="containert">
  <header class="section">
    Header
  </header>
  <main class="section" contenteditable>
    <div class="left-side section" contenteditable>
      Left Sidebar
    </div>
    <div class="center  section" contenteditable>
      Main Content
    </div>
    <div class="right-side  section" contenteditable>
      Right Sidebar
    </div>
  </main>
  <footer class="section">
      Footer
  </footer>
</div>