проблема с адаптивной сеткой css tailwind

#reactjs #css-grid #tailwind-css

Вопрос:

У меня возникла проблема при попытке добавить префикс «screen» в grid-column, макет идеален, но когда я добавляю md: в grid-col-span-6, все перепуталось.

это код :

 import React from "react";
import app from "../images/app.png";

    const Featured = () => {
    return (
    <div className="mt-52 ">
      <h1 className="text-primary-dark-theme text-5xl mt-14">Projects</h1>

      <div className="grid grid-cols-12 grid-rows-1 mt-20 ">
        <div className="row-start-1 row-span-1 col-start-1 md:col-span-6">
          <img src={app} alt="" className="w-full" />
        </div>

        <div className="row-start-1 row-span-1 col-start-6  col-span-7">
          <div className="h-full w-full">
            <h1 className="text-right text-primary-dark-theme">
              Featured Project
            </h1>
            <h1 className="text-right text-gray-300 font-bold ">Title</h1>

            <p className="p-5 bg-gray-800 text-gray-400 shadow-lg rounded-md mt-5">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio id
              doloribus sequi repellendus aperiam dolore!
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Featured;

Вот как выглядит пользовательский интерфейс в md

это результат, который я хочу получить

это то, что произошло, когда я добавил md predix в col-span-6

1. вам нужно добавить блок внутри ваших элементов div, размер которого необходимо изменять при получении разных изменений порта просмотра. Это адаптирует каждый элемент, который содержит это. Также проверьте, правильно ли вы используете flex и grid. как и предполагалось. Проверьте эту ссылку tailwindcss.cn/docs/display

Ответ №1:

Проблема, похоже, заключается в том, что при применении responsive md:col-span-6 он также переопределяется col-start-1 (вы можете видеть, что стили больше не применяются в инструментах разработки). Добавление md:col-start-1 , похоже, исправляет это поведение.

Однако просто измените оболочку вашего изображения <div /> на:

 <div class="row-start-1 row-span-1 col-start-1 col-span-12">

Кажется, есть желаемый результат.