首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >两个网格项之间的附加垂直空间

两个网格项之间的附加垂直空间
EN

Stack Overflow用户
提问于 2022-04-05 22:23:56
回答 1查看 413关注 0票数 0

对于大于768 of的设备,我使用2列的网格布局,出于某种原因,它决定增加该元素与位于该断点之后的元素之间的间距。

我需要修复高度问题,以便由该列中的内容定义高度。

**我正在使用尾风CSS和Next.js。

代码语言:javascript
运行
复制
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>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-04-06 22:31:45

在网格div中有8个子div。因此,您应该将md:grid-rows-6设置为md:grid-rows-8,否则,间隔将不正常地保持6 div的正确间距。

查看我创建的新演示:https://codesandbox.io/s/modest-darkness-9utcvm?file=/src/App.js

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71759052

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档