csstailwind-csscss-grid

How do I achieve this complex CSS grid layout?

I've been struggling for about an hour with this problem. I'm trying to create this service grid, but it's more complex than just a normal bento grid that spans columns. Please refer to the image attached to see a visual representation of what I'm trying to achieve. The code below is what I've ended up with.

desired_layout

import React from "react";

const ServiceCards = () => {
  return (
    <div className="">
      <div className="grid grid-cols-6 grid-rows-4 gap-4 ">
        <div className="col-span-1 row-span-1 bg-white border-2 border-blue-500 rounded-lg p-4 flex items-center justify-center">
          <span className="text-gray-600">Card 1</span>
        </div>

        <div className="col-span-3 row-span-1 bg-white border-2 border-blue-500 rounded-lg p-4 flex items-center justify-center">
          <span className="text-gray-600">Card 2</span>
        </div>

        <div className="col-span-2 row-span-1 bg-white border-2 border-blue-500 rounded-lg p-4 flex items-center justify-center">
          <span className="text-gray-600">Card 3</span>
        </div>

        <div className="col-span-1 row-span-2 bg-white border-2 border-blue-500 rounded-lg p-4 flex items-center justify-center">
          <span className="text-gray-600">Card 4</span>
        </div>

        <div className="col-span-3 row-span-1 bg-white border-2 border-blue-500 rounded-lg p-4 flex items-center justify-center">
          <span className="text-gray-600">Card 5</span>
        </div>

        <div className="col-span-2 row-span-2 bg-white border-2 border-blue-500 rounded-lg p-4 flex items-center justify-center">
          <span className="text-gray-600">Card 6</span>
        </div>

        <div className="col-span-2 row-span-1 bg-white border-2 border-blue-500 rounded-lg p-4 flex items-center justify-center">
          <span className="text-gray-600">Card 7</span>
        </div>

        <div className="col-span-1 row-span-1 bg-white border-2 border-blue-500 rounded-lg p-4 flex items-center justify-center">
          <span className="text-gray-600">Card 8</span>
        </div>
      </div>
    </div>
  );
};

export default ServiceCards;
Solution

  • Thanks to https://codepen.io/gc-nomade/pen/YPXLQRN I just modify some classes

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>


<div class="p-10" style="filter:drop-shadow(0 0 1px) drop-shadow(0 0 1px) drop-shadow(0 0 1px)">
  <div class="grid grid-cols-6 grid-rows-4 gap-4">
    <div class="col-span-1 row-span-1 flex items-center justify-center rounded-lg border-blue-500 bg-white p-4">
      <span class="text-gray-600">Card 1</span>
    </div>

    <div class="col-span-3 row-span-1 flex items-center justify-center rounded-lg border-blue-500 bg-white p-4">
      <span class="text-gray-600">Card 2</span>
    </div>

    <div class="col-span-2 row-span-1 flex items-center justify-center rounded-lg border-blue-500 bg-white p-4">
      <span class="text-gray-600">Card 3</span>
    </div>

    <div class="col-span-1 row-span-2 flex items-center justify-center rounded-lg border-blue-500 bg-white p-4">
      <span class="text-gray-600">Card 4</span>
    </div>

    <div class="col-span-3 row-span-1 flex items-center justify-center rounded-lg border-blue-500 bg-white p-4">
      <span class="text-gray-600">Card 5</span>
    </div>

    <div class="col-span-2 row-span-2 flex items-center justify-end rounded-lg border-blue-500 bg-white p-4" style="clip-path: polygon(0 0, 100% 0, 100% 100%, 46% 100%, 46% calc(50% - .7em), 0   calc(50% - .7em) );">
      <span class="text-gray-600">Card 6</span>
    </div>

    <div class="col-span-2 row-span-1 flex items-center justify-center rounded-lg border-blue-500 bg-white p-4">
      <span class="text-gray-600">Card 7</span>
    </div>

    <div class="col-span-1 row-span-1 flex items-center justify-center rounded-lg border-blue-500 bg-white p-4 w-[200%]">
      <span class="text-gray-600">Card 8</span>
    </div>
  </div>
</div>