在前端开发中，选项卡是一种常用的 UI 组件，它可以让用户快速切换内容。在一些复杂的页面中，我们可能需要实现多列并排的选项卡效果，这时就可以使用 CSS Grid 布局来实现。
什么是 CSS Grid 布局？
CSS Grid 布局是一种新的 CSS 布局方式，它可以让我们更方便地实现各种复杂的布局效果。它的特点是通过网格化布局来掌控网页的布局，可以实现各种复杂的布局效果。
实现多列并排选项卡效果
下面我们来看一下如何使用 CSS Grid 布局实现多列并排选项卡效果。
HTML 结构
首先我们需要准备好 HTML 结构，代码如下：
-- -------------------- ---- ------- ---- ------------- ---- ------------------- ---- --------------- ------------------ ---- --------------------------- ---- --------------------------- ------ ---- -------------------- ---- --------------- -------------------- ---- ----------------------------- ---- ----------------------------- ------ ---- ------------------- ---- --------------- ------------------ ---- --------------------------- ---- --------------------------- ------ ---- -------------------- ---- --------------- -------------------- ---- ----------------------------- ---- ----------------------------- ------ ------展开代码
我们可以看到，在 HTML 结构中，我们使用了两个 .tab-header 和 .tab-content，每个 .tab-header 对应一个 .tab-content，它们在布局上是并列的关系。
CSS 样式
接下来我们来看一下 CSS 样式，代码如下：
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --- ---- --------- ----- - ------------ ------------ - -------- ----- ---------------------- ----------------- ------------- ------ --------- ----- - --------- - -------- ---- ----- ----------------- ----- ----------- ------- ------- -------- - ---------------- - ----------------- ----- ------ ----- - --------- - -------- ----- ----------------- ----- -------- ----- - ---------------- - -------- ------ -展开代码
我们可以看到第一步，我们设置 .tabs 元素为网格布局，我们将它的列数设置为 2，它的子元素将自动排列在两列中。我们同样设置了网格间隔为 20px。
接下来，我们设置 .tab-header 和 .tab-content 使用网格布局。我们使用 repeat(auto-fill, minmax(200px, 1fr)) 来指定网格列的个数，这里的 200px 是列的最小宽度，1fr 表示列的宽度自动平均分配，auto-fill 表示列数自动填满父元素。我们同样设置了网格间隔为 20px。
然后，我们设置了 .tab-item 元素和 .tab-pane 元素的样式，它们分别是选项卡头部和内容部分。我们对选中的选项卡进行高亮处理，并在选项卡对应的内容部分显示。
示例代码
完整示例代码如下：
-- -------------------- ---- ------- ------- ----- - -------- ----- ---------------------- --- ---- --------- ----- - ------------ ------------ - -------- ----- ---------------------- ----------------- ------------- ------ --------- ----- - --------- - -------- ---- ----- ----------------- ----- ----------- ------- ------- -------- - ---------------- - ----------------- ----- ------ ----- - --------- - -------- ----- ----------------- ----- -------- ----- - ---------------- - -------- ------ - -------- ---- ------------- ---- ------------------- ---- --------------- ------------------ ---- --------------------------- ---- --------------------------- ------ ---- -------------------- ---- --------------- -------------------- ---- ----------------------------- ---- ----------------------------- ------ ---- ------------------- ---- --------------- ------------------ ---- --------------------------- ---- --------------------------- ------ ---- -------------------- ---- --------------- -------------------- ---- ----------------------------- ---- ----------------------------- ------ ------ -------- -- ------- -------------------------------------- ---------------------------- --------- - --------------------------------- -------- -- - --- ----- - --------------------------------------------------- --- ---------- - ----------------------------------- --- ------- - --------------------------- -------------------------------------------------------------------- -------------------------------- --------------------------------------------------------------- -------------------------------- --- --- ---------展开代码
总结
通过上面的示例代码，我们可以使用 CSS Grid 布局实现多列并排的选项卡效果。CSS Grid 布局可以让我们更方便地实现各种复杂的布局效果，同时也提高了网站的可维护性和可读性。如果你还没有使用 CSS Grid 布局，那么现在是时候尝试一下了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e18536f6b2d6eab3cb0fb1
