09 头部频道区 - 右侧频道内容

• 头部区域 .large-header 分为导航区 .bili-nav，banner 区 .bili-banner，频道区 .bili-channel。
• 频道区 .bili-channel 可以分为两部分（中间跟右侧明显都是两排多列小方块结构，可以划分在一起），左边是频道列表图标区域 .left-channel-icon，右边是频道内容区 .right-channel-container。
• 前面课程完成了导航区 .bili-nav 和 banner 区 .bili-banner，上一节课完成频道区 .bili-channel 中的左边频道列表图标区域 .left-channel-icon，这节课完成右侧频道内容区 .right-channel-container。

布局分析

• 频道区 .bili-channel 可以分为两部分，左边是频道列表图标区域 .left-channel-icons，右边是频道内容区 .right-channel-container。

• 右侧频道内容区分为左侧一个网格，右侧一个网格。.right-channel-container>.channel-items__left+.channel-items__right

• 使用 flex 布局。.right-channel-container{display:flex; width:100%;}

  • 左侧网格就是 a 标签加内容，一共 22 个。区别只是最后一个更多按钮里边多了一个 "更多图标"。.channel-items__left>a[href=#]*22

  • 左侧网格使用 grid 布局，2 行 11 列，间距 10px。.channel-items__left{display:grid; grid-template-columns:repeat(11,1fr); grid-template-rows:repeat(2,1fr); gap:10px; width:100%;}

  • 右侧网格为 a 标签包裹 svg 图标和 title 文字。.channel-items__right>(a[href=#]>span.title)*6

  • 右侧网格使用 grid 布局，2 行 3 列，间距 10px。.channel-items__right{display:grid; grid-template-rows:repeat(2,1fr); grid-auto-flow:column; row-gap:10px; width:240px;}

    • grid-template-rows:repeat(2,1fr); 将网格分为两行，每行的大小都是 1 份可用空间。不能使用 grid-template-columns:repeat(3,1fr); （将网格分为 3 列，每列的大小都是 1 份可用空间），因为这样会导致最后一列的宽度不够，最后一列的内容会换行。
    • 这样写的话需要使用 grid-auto-flow:column; 新的网格项会从上到下排列，直到网格的最后一行，然后从左到右排列。网格项的宽度由内容决定，而不是网格本身的大小决定。

• .right-channel-container>.channel-items__left>a[href=#]*22^.channel-items__right>(a[href=#]>span.title)*6

结构搭建

<!-- 右侧频道内容 -->
<div class="right-channel-container">
  <!-- 左侧网格 -->
  <div class="right-channel-container__left">
    <a href="#">番剧</a>
    <a href="#">国创</a>
    <a href="#">综艺</a>
    <a href="#">动画</a>
    <a href="#">鬼畜</a>
    <a href="#">舞蹈</a>
    <a href="#">娱乐</a>
    <a href="#">科技</a>
    <a href="#">美食</a>
    <a href="#">汽车</a>
    <a href="#">运动</a>
    <a href="#">电影</a>
    <a href="#">电视剧</a>
    <a href="#">纪录片</a>
    <a href="#">游戏</a>
    <a href="#">音乐</a>
    <a href="#">影视</a>
    <a href="#">知识</a>
    <a href="#">资讯</a>
    <a href="#">生活</a>
    <a href="#">时尚</a>
    <a href="#">
      <span>更多</span>
      <svg class="iconpark-icon">
        <use href="#geng-duo"></use>
      </svg>
    </a>
  </div>

  <!-- 右侧网格 -->
  <div class="right-channel-container__right">
    <a href="#">
      <svg class="iconpark-icon">
        <use href="#zhuan-lan"></use>
      </svg>
      <span class="title">专栏</span>
    </a>
    <a href="#">
      <svg class="iconpark-icon">
        <use href="#zhi-bo"></use>
      </svg>
      <span class="title">直播</span>
    </a>
    <a href="#">
      <svg class="iconpark-icon">
        <use href="#huo-dong"></use>
      </svg>
      <span class="title">活动</span>
    </a>
    <a href="#">
      <svg class="iconpark-icon">
        <use href="#ke-tang"></use>
      </svg>
      <span class="title">课堂</span>
    </a>
    <a href="#">
      <svg class="iconpark-icon">
        <use href="#she-qu-zhong-xin"></use>
      </svg>
      <span class="title">社区中心</span>
    </a>
    <a href="#">
      <svg class="iconpark-icon">
        <use href="#xin-ge-re-bang"></use>
      </svg>
      <span class="title">新歌热榜</span>
    </a>
  </div>
</div>

样式处理

/**
 * 右侧频道内容
 */
.right-channel-container {
  display: flex;
  width: 100%;
}

/* 左侧网格 */
.right-channel-container__left {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 10px;

  width: 100%;

  a {
    height: 26px;
    line-height: 26px;
    color: #61666d;
    background-color: #f6f7f8;
    border: 1px #f1f2f3 solid;
    border-radius: 6px;
    text-align: center;
  }
}

/* 右侧网格 */
.right-channel-container__right {
  flex-shrink: 0;

  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  row-gap: 10px;

  width: 240px;
  margin-left: 30px;
  border-left: 1px solid #e3e5e7;

  a {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: 100%;
    height: 28px;
    letter-spacing: 2px;
  }

  svg {
    width: 20px;
    height: 20px;
    margin-right: 4px;
    fill: #61666d;
  }

  span {
    color: #61666d;
  }
}