CSS Grid 布局实现多列并排选项卡效果

在前端开发中，选项卡是一种常用的 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

阅读全文

猜你喜欢

  • Babel 对于 ES6 的 let 和 const 变量转化问题解析

    随着 ES6 的普及和日益成熟，我们可以看到更多的优秀的项目都在采用 ES6 的新特性和语法，其中 let 和 const 关键字无疑是最令人兴奋的特性之一。但事实上，ES6 并不能够直接被所有浏览器...

    1 年前
  • Chai.js 和 Jest：打造一个完美的 Vue.js 应用程序测试流程

    在现代前端开发中，测试是不可或缺的一环。Vue.js 是一个非常流行的前端框架，拥有庞大的生态圈和众多的开发者社区，在 Vue.js 应用程序的测试方面，也有众多的解决方案，其中 Chai.js 和 ...

    1 年前
  • 解决 ES9 中 JSON.stringify() 方法 Unicode 符号编码错误问题

    在前端开发中，我们经常会使用 JSON 格式的数据进行数据传输。而 JSON.stringify() 方法是将 JavaScript 对象转换成 JSON 字符串的常见方法。

    1 年前
  • 使用 Socket.io 实现实时推送消息的技巧

    在现今的 Web 应用中，为实现实时的双向通讯，使用 Socket.io 已成为一种常见的技术方案。Socket.io 是一个基于 Node.js 的实时双向通讯库，支持浏览器和服务器之间的实时数据传...

    1 年前
  • 如何使用 Cypress 测试 IE

    前言 Cypress 是一个流行的前端端到端测试框架，但是它不支持旧版的 Internet Explorer 浏览器（IE），这是因为 Cypress 是基于现代的 Web 技术栈开发的。

    1 年前
  • Vue.js 中如何使用 filters 过滤器

    在每个程序员的日常工作中，数据的处理都是必不可少的。为了更加方便、快捷地对数据进行处理，我们可以使用 Vue.js 中提供的 filters 过滤器。在本文中，我们将会详细讨论 Vue.js 中如何使...

    1 年前
  • Tailwind 优化图片显示的技巧

    在前端开发中，图片显示效果一直是一个非常重要的话题。而在使用 Tailwind 进行样式设计的过程中，我们可以通过一些优化技巧来进一步提升图片展示效果。本文将详细介绍这些技巧，帮助你更好地推动图片效果...

    1 年前
  • TypeScript 中的类型兼容性详解

    TypeScript 是 JavaScript 的一个超集，它为我们提供了静态类型检查和诸多其他的语言特性。其中一个非常重要的特性就是类型兼容性，它可以让我们更加方便地对代码做出类型判断和类型转换。

    1 年前
  • 如何使用 MongoDB 进行准确和快速的地理位置检索

    随着地理信息系统的飞速发展，越来越多的应用需要对地理位置进行检索和处理。MongoDB 作为一种流行的 NoSQL 数据库，其支持地理位置索引以及各种地理位置查询操作，为地理位置相关应用提供了便捷和高...

    1 年前
  • 使用 Node.js 编写并发程序的技巧

    在现代 Web 应用中，使用 Node.js 编写并发程序已经变得越来越常见。Node.js 的诸多特性为并发编程提供了很多便利，比如事件驱动的编程模型、非阻塞 I/O 和多线程编程等。

    1 年前
  • Kubernetes 部署 RabbitMQ: 解决消息队列问题

    在现代的分布式系统中，消息队列是非常重要的组件。消息队列可以使得不同的系统之间实现异步通信，避免系统之间的直接依赖关系，提升系统的可靠性和扩展性。可以说，消息队列已成为分布式系统中不可或缺的一部分。

    1 年前
  • Mongoose 操作 MongoDB 的简单教程

    介绍 Mongoose 是一个 Node.js 中的 MongoDB 建模工具，它将 MongoDB 的数据格式化，并提供了一种操作 MongoDB 的简洁易用的方式。

    1 年前
  • 如何在 ES6 中使用类（Class）封装请求函数

    在前端开发中，我们常常需要进行网络请求来获取数据。而在处理数据和请求过程中，封装的好坏往往影响着整个程序的质量和效率。在ES6中，类的引入为开发者提供了一种更加优雅的方式来封装请求函数。

    1 年前
  • 打造一流的 Docker 环境 —— 基于阿里云的部署指导

    打造一流的 Docker 环境 —— 基于阿里云的部署指导 作为一名前端工程师，不管是在团队协作还是个人开发中，都离不开服务器的环境配置。而 Docker 作为一种开源的容器化技术，可以有效地解决环境...

    1 年前
  • ES8 新特性：字符串填充方法详解

    在 ES8 中，新增了字符串填充方法 padStart 和 padEnd，它们可以方便地进行字符串长度补全。 padStart 和 padEnd 方法的介绍 padStart 和 padEnd 方法都...

    1 年前
  • ES11 中 Array.prototype.flatMap() 在实际开发中的应用

    JavaScript 中的数组是开发者经常使用的数据结构，每个版本的 ECMAScript 都会为数组添加新的方法和特性。ES11 引入了 Array.prototype.flatMap() 方法，这...

    1 年前
  • 使用 CSS Reset 后如何增加元素边框

    在制作网站或者应用时，前端开发者通常会使用 CSS Reset，以便消除浏览器默认样式造成的问题，使页面在不同浏览器上具有一致的外观。然而，在 CSS Reset 应用之后，许多元素将会失去它们原有的...

    1 年前
  • Deno 中的进程管理方式

    Deno 是一个用 Rust 和 TypeScript 构建的现代化的 JavaScript 和 TypeScript 运行时环境。在 Deno 中，我们可以使用进程管理方式来解决一些问题。

    1 年前
  • SASS 中的字符串操作函数详解

    在前端开发中，我们经常需要处理字符串。而在 SASS 中，有一些强大的字符串操作函数，可以帮助我们更方便地处理字符串。本文将详细介绍 SASS 中的字符串操作函数，包括字符串的拼接、提取、替换等操作，...

    1 年前
  • Flexbox 布局的属性详解与应用

    在前端开发中，布局一直都是一个令人头疼的问题。特别是在响应式设计中，不同设备尺寸的适配问题使得布局方案更加复杂。而 Flexbox 布局正是一个非常强大且易于使用的解决方案。

    1 年前

相关推荐

    暂无文章