grid 写出麻将一到九筒(tailwindcss版)

歪比巴卜666

已于 2024-08-14 14:53:58 修改

阅读量278

点赞数 3

文章标签：前端 javascript css3

于 2024-08-13 15:06:46 首次发布

本文链接：https://blog.csdn.net/qq_46356598/article/details/141164420

版权

请添加图片描述

在前端开发中,我们最常使用的就是flex 布局, 对于 Grid 都是只闻其名, 却不太敢尝试. 今天我们就来探索一下如何用 Tailwind CSS 和 Grid 布局“画”出一副麻将牌！

为什么选择 Tailwind CSS 和 Grid？

首先，Tailwind CSS 是一个功能强大且灵活的实用工具集，它能让我们快速构建漂亮的 UI。而 CSS Grid 则为我们提供了一个二维的布局系统，非常适合用来精确地排列元素。这次，我们会利用这两个工具，以一种富有创造性的方式来进行布局，目标是画出从一筒到九筒的麻将牌。

开始动手：HTML 结构

我们从一个基本的 HTML 模板开始，结构简单明了。每个麻将牌使用一个 ul 列表来表示，里面的每一个 li 项代表一个红色的点。使用 Tailwind CSS，我们可以非常方便地将这些点布置成需要的形状。

<div class="grid grid-cols-3 gap-4 p-4">
  <ul class="grid place-items-center">
    <li></li>
  </ul>
  <ul class="grid grid-rows-2 place-items-center">
    <li></li>
    <li></li>
  </ul>
  <ul class="grid grid-rows-3 place-items-center">
    <li class="justify-self-start"></li>
    <li></li>
    <li class="justify-self-end"></li>
  </ul>
  <!-- 更多的麻将牌布局... -->
</div>

重点解析：如何使用 Grid 实现布局

在上面的代码片段中，grid grid-cols-3 设置了一个三列布局，gap-4 添加了列之间的间距，place-items-center 则将每个 li 项居中对齐。

每个麻将牌的布局也是利用 Grid 实现的。例如，要绘制一个三筒牌：

<ul class="grid grid-rows-3 place-items-center">
  <li class="justify-self-start"></li>
  <li></li>
  <li class="justify-self-end"></li>
</ul>

这里，我们使用了 grid-rows-3 创建了三行，然后通过 justify-self-start 和 justify-self-end 将点分别对齐到左侧和右侧，从而形成三筒的图案。

最终效果

通过这种方式，我们可以轻松地绘制出从一筒到九筒的麻将牌。每个 ul 列表表示一张牌，每个 li 列表项则是牌上的一个点。使用 Tailwind CSS 和 Grid 布局，这种设计不仅直观，还极具可扩展性。

总结

利用 Tailwind CSS 的强大功能和 Grid 布局的灵活性，我们不仅能用来进行日常的页面布局，还能尝试更多有趣的创作，比如今天的麻将牌绘制。希望这篇文章能激发你在前端开发中的更多创造力，去尝试一些新的、令人兴奋的布局方式！

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    ul {
      width: 80px;
      height: 100px;
      background-color: #ccc;
      border-radius: 5px;
    }

    li {
      list-style: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="grid grid-cols-3 gap-4 p-4">
    <ul class="grid place-items-center">
      <li></li>
    </ul>
    <ul class="grid grid-rows-2 place-items-center">
      <li></li>
      <li></li>
    </ul>
    <ul class="grid grid-rows-3 place-items-center">
      <li class="justify-self-start"></li>
      <li></li>
      <li class="justify-self-end"></li>
    </ul>
    <ul class="grid grid-cols-2 grid-rows-2 place-items-center">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul class="grid grid-cols-6 grid-rows-3 place-items-center">
      <li class="col-span-3"></li>
      <li class="col-span-3"></li>
      <li class="col-span-6"></li>
      <li class="col-span-3"></li>
      <li class="col-span-3"></li>
    </ul>
    <ul class="grid grid-cols-2 grid-rows-3 place-items-center">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul class="grid">
      <div class="grid h-12 grid-cols-3 place-items-center">
        <li class="self-start"></li>
        <li></li>
        <li class="self-end"></li>
      </div>
      <div class="grid h-[52px] grid-cols-2 place-items-center">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </div>
    </ul>
    <ul class="grid grid-cols-2 grid-rows-4 place-items-center">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul class="grid grid-cols-3 grid-rows-3 place-items-center">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>

</html>

歪比巴卜666

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
grid 写出麻将一到九筒(tailwindcss版)

利用 Tailwind CSS 的强大功能和 Grid 布局的灵活性，我们不仅能用来进行日常的页面布局，还能尝试更多有趣的创作，比如今天的麻将牌绘制。希望这篇文章能激发你在前端开发中的更多创造力，去尝试一些新的、令人兴奋的布局方式！
复制链接

扫一扫