Как разместить посты с помощью grid(tailwind css)?

Question

[Goj0]

вот пример с макета. Мне необходимо разместить посты так же, как в макете.
вот так посты выглядят у меня

<div className="flex justify-center items-center flex-row mt-10">
        <div className="flex-1 grid sm:grid-cols-2 grid-cols-1 gap-[2rem] w-full h-full md:mt-20">
          {BlogCard.map((post) => (
            <div
              key={post.id}
              className="bg-[#042C54] flex flex-col items-start max-w-[417px] max-h-[700px]"
            >
              <div className="w-[100%] mr-2">
                <img className="w-[100%]" src={post.img}></img>
              </div>

              <div className="flex flex-col justify-between p-5 w-full h-full">
                <div>
                  <p className="text-[11px] text-white font-[700]">
                    {post.date}
                  </p>
                  <h3 className="sm:text-[25px] text-[15px] text-white font-[800]">
                    {post.title}
                  </h3>
                </div>
                <p className="text-[11px] text-white font-[700]">Read more</p>
              </div>
            </div>
          ))}
        </div>
      </div>

Всё никак не могу разобраться в этом вопросе, поэтому буду признателен за помощь.

Answer 1

[Froggyweb]

https://tailwindcss.com/docs/grid-row
не балуйся с font-[700] и пр - это плохо

Comments

[Goj0]

Спасибо, наконец разобрался с этим. А почему плохо использовать font-[700] и пр?