CSS Grid Slack

Slack是聊天群组 + 工具集成 + 文件整合 + 统一搜索的工具和服务，将各种碎片化的企业沟通和协作集中到一起。

典型的Slack的布局形式

Slack布局

使用Grid栅格来构建布局

Grid栅格

区块	列	行	尺寸
team	Line1~Line2	Line1~Line4	100px x 100vh
channel	Line2~Line3	Line1~Line4	200px x 100vh
header	Line3~Line4	Line1~Line2	1fr x auto
message	Line3~Line4	Line2~Line3	1fr x 1fr
input	Line3~Line4	Line3~Line4	1fr x auto

创建3x3的栅格

<div class="layout">
  <div class="team">team</div>
  <div class="channel">channel</div>
  <div class="header">header</div>
  <div class="message">message</div>
  <div class="input">input</div>
</div>

.layout{
  height:100vh;
  
  display:grid;
  grid-template-columns: 100px 200px 1fr;
  grid-template-rows:auto 1fr auto;
}

将不同区域放入栅格对应位置

.team{
  grid-column:1;
  grid-row: 1 / 4;
}
.channel{
  grid-column:2;
  grid-row: 1 / 4;
}
.header{
  grid-column:3;
  grid-row:1;
}
.message{
  grid-column:3;
  grid-row:2;
}
.input{
  grid-column:3;
  grid-row:3;
}

完整代码

Slack布局

<div class="layout">
  <div class="team box">team</div>
  <div class="channel box">channel</div>
  <div class="header box">header</div>
  <div class="message box">
    <ul class="msglist">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="input box">
    <input type="text" />
  </div>
</div>

*, *:before, *:after{box-sizing: border-box;}
body{margin:0; background-color:#f2f2f2;}
.box{padding:1em; text-align:center; color:#fff;}
/*layout*/
.layout{
  height:100vh;
  display:grid;
  grid-template-columns: 100px 200px 1fr;
  grid-template-rows:auto 1fr auto;
}
.team{
  grid-column:1;
  grid-row: 1 / 4;
  background-color:#362233;
}
.channel{
  grid-column:2;
  grid-row: 1 / 4;
  background-color:#52364E;
}
.header{
  grid-column:3;
  grid-row:1;
  background-color:#ffffff;
  color: #333;
  border-bottom:1px solid #f2f2f2;
}
.message{
  grid-column:3;
  grid-row:2;
  background-color:#ffffff;
  padding:0 1em;
  overflow-y:scroll;
}
.input{
  grid-column:3;
  grid-row:3;
}
/*component*/
.msglist{padding:0; margin:0;}
.msglist li{padding:.2em; margin-top:1em; margin-bottom:1em; background-color:#f2f2f2;}
input{width:100%; padding:1em; outline:none; border:1px solid #f2f2f2;}