Дополнительное вертикальное пространство между двумя элементами сетки

Я использую макет сетки из 2 столбцов для ширины устройства более 768 пикселей, и по какой-то причине он решает увеличить расстояние между этим элементом и тем, который расположен после этой точки останова.

Мне нужно исправить проблему с высотой, чтобы высота определялась содержимым в этом столбце.

** Я использую Tailwind CSS и Next.js.

Дополнительное вертикальное пространство между двумя элементами сетки

import React from 'react'
    
function servicios() { 
  return ( 
    <div>
    
      {/* Carousel component */}
    
      <div className='grid grid-cols-1 md:grid-rows-6 md:grid-cols-2 sm:px-5'>
        
        <div className='flex flex-col px-5 my-10 md:row-start-1 md:col-start-1 md:col-span-1'>
          <h2 className='text-xl mb-4'>Inbound Marketing</h2>
          <p className='text-gray-400'>A través del Inbound Marketing establecemos... </p>
        </div>
        
        <div className='flex flex-col px-5 my-10 md:row-start-2 md:col-start-2'>
          <h2 className='text-xl mb-4'>¿Qué es el Inbound Marketing?</h2>
          <p className='text-gray-400'>El Inbound Marketing es...</p>
        </div>
      
        <div className='flex flex-col px-5 my-10 md:row-start-3 md:col-start-1'>
          <h2 className='text-xl mb-4'>Cómo funciona:</h2>
          <p className='text-gray-400'>La idea del Inbound Marketing es...</p>
          <p className='text-gray-400'>Tratamos de presentar...</p>
        </div>
      
        <div className='flex flex-col px-5 my-5 md:row-start-4 md:col-start-1'>
          <h2 className='text-xl mb-4'>¿Qué resultados queremos conseguir?</h2>
          <p className='text-gray-400'>El Inbound Marketing sirve...</p>
          <p className='text-gray-400'>Podemos...</p>
          <p className='text-white my-2'>Aumentar...</p>
          <p className='text-white my-2'>Disminuir...</p>
          <p className='text-white my-2'>Mejorar...</p>
        </div>
      
        <div className='px-5 my-5 md:row-start-5 md:col-start-1'>
          <video autoPlay loop muted>
            <source src = "/social.mp4" type='video/mp4'/>
          </video>
        </div>
        <div className='flex flex-col px-5 my-10 md:row-start-5 md:col-start-2'>
          <h2 className='text-xl mb-4'>Ads Sociales</h2>
          <p className='text-gray-400'>Es un tipo de publicidad...</p>
        </div>
      
        <div className='flex flex-col px-5 my-10 md:row-start-6 md:col-start-1'>
          <h2 className='text-xl mb-4'>Campañas PPC</h2>
          <p className='text-gray-400'>También gestionamos...</p>
          <h2 className='text-xl my-4'>¿Cómo lo hacemos...</h2>
          <p className='text-gray-400'><span className='text-white'>Análisis:</span> Estudio...</p>
          <p className='text-gray-400 mt-2'><span className='text-white'>Análisis... </span>Estudio y...</p>
          <p className='text-gray-400 mt-2'><span className='text-white'>Propuestas...</span> Propuesta de acciones...</p>
          <p className='text-white mt-4'>Para poder desempeñar...</p>
        </div>
        <div className='px-5 md:row-start-6 md:col-start-2'>
          <video autoPlay loop muted>
            <source src = "/analitics.mp4" type = "video/mp4" />
          </video>
        </div>
      </div>

Можете ли вы опубликовать весь код для этого <div className='grid grid-cols-1 md:grid-rows-6 md:grid-cols-2 sm:px-5'> до закрывающего тега?

AnthonyDev220 06.04.2022 00:46

Пожалуйста, опубликуйте полный код?

mohit maroliya 06.04.2022 09:09

@Anthony220Anthony220 Я отредактировал вопрос и загрузил весь код

Alex Cotton 07.04.2022 00:09

@mohitmaroliya Я отредактировал и загрузил весь код, связанный с вопросом

Alex Cotton 07.04.2022 00:10
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
4
60
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У вас есть 8 подписок div внутри вашей сетки div. Поэтому вы должны установить md:grid-rows-6 на md:grid-rows-8, иначе интервал будет вести себя ненормально, чтобы поддерживать правильный интервал для 6 div.

Посмотрите эту новую демонстрацию, которую я создал: https://codesandbox.io/s/modest-darkness-9utcvm?file=/src/App.js

Я попробовал my-auto, но это не решает проблему, мне нужно было небольшое расстояние сверху и снизу между элементами, и для этого оно и предназначено. Для второго варианта, который вы рекомендовали, я использовал эти утилиты, но это не дает мне того вида, к которому я стремлюсь, я хочу, чтобы содержимое чередовалось слева и справа, поэтому я выбрал вариант сетки с 2 столбцами.

Alex Cotton 07.04.2022 20:35

@AlexCotton Я изменил свой ответ. Пожалуйста, ознакомьтесь с демо-версией, которую я создал, и посмотрите, это то, что вы хотели.

AnthonyDev220 07.04.2022 21:04

Это решило проблему, спасибо за помощь

Alex Cotton 08.04.2022 18:01

Другие вопросы по теме