html - 改变 CSS 网格的方向

问题描述

我想将所有列变成小型设备的行。是否可以使用 CSS 网格来做到这一点？我正在使用 GatsbyJS 和 Tailwind CSS。

这是代码：

const contentList = [
  {
    title: 'Text 1',
    year: 2021,
    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rhoncus finibus quam, condimentum tincidunt erat pharetra ac. Nunc ante sapien, congue vitae felis nec, lobortis viverra augue. Integer vitae nibh vel nunc finibus placerat. Aliquam tincidunt magna eros, nec maximus neque accumsan eget. Etiam vitae convallis massa. Donec diam nulla, volutpat a rutrum nec, pulvinar sit amet neque. Donec eleifend ut magna varius condimentum. Morbi eu erat et dolor porta porttitor eget vitae mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus ornare, risus id ornare sagittis, est augue convallis lectus, et aliquet magna arcu nec arcu. Donec at mollis metus. Aenean et mattis velit. Phasellus id enim magna.'
  },
  {
    title: 'Text 2',
    year: 2020,
    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rhoncus finibus quam, condimentum tincidunt erat pharetra ac. Nunc ante sapien, congue vitae felis nec, lobortis viverra augue. Integer vitae nibh vel nunc finibus placerat. Aliquam tincidunt magna eros, nec maximus neque accumsan eget. Etiam vitae convallis massa. Donec diam nulla, volutpat a rutrum nec, pulvinar sit amet neque. Donec eleifend ut magna varius condimentum. Morbi eu erat et dolor porta porttitor eget vitae mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus ornare, risus id ornare sagittis, est augue convallis lectus, et aliquet magna arcu nec arcu. Donec at mollis metus. Aenean et mattis velit. Phasellus id enim magna.'
  },
]

const currentYear = new Date().getFullYear()
const earliestYear = contentList.reduce((prev, curr) => prev.year > curr.year ? curr : prev).year
const timeline = []
for (let year = currentYear; year >= earliestYear; year--) {
  timeline.push({
    year: year,
    contents: contentList.filter(e => e.year === year)
  })
}

const Event = ({ year, title }) => (
  <>
    <div class="col-start-1 ml-auto text-gray-600">
      {year ?? ""}
    </div>
    <div class="col-start-2 m-auto bg-gray-800 shadow-xl w-5 h-1 rounded-full z-10"></div>
    <div class="col-start-3 col-span-3 mr-auto">
      {title &&
      <button class="text-left p-4 rounded-md hover:bg-black hover:text-white">
        <div class="font-medium">{title}</div>
      </button>}
    </div>
  </>
)

const Grid = () => (
  <div class="relative grid grid-cols-5 lg:2/5 xl:w-1/3">
    <div class="col-start-2 mx-auto mb-2 text-gray-600">
      Present
    </div>
    <div class="col-start-2 mx-auto">
      <div class="border-w-1 absolute border-gray-700 h-full border"></div>
    </div>
    {timeline.map(({ year, contents }) => 
      <>
        {contents.map(e => <Event title={e.title} />)}
        <Event year={year} />
      </>
    )}
  </div>
)

const Content = ({ content }) => (
  <div class="ml-8 lg:3/5 xl:w-2/3">
    <h5>{content.title}</h5>
    <p>{content.body}</p>
  </div>
)

export const Parent = () => {  
  return (
    <section class="md:h-screen px-10 pt-10 flex items-center">
      <div class="flex flex-col">
        <h4>Title</h4>
        <div class="flex flex-col lg:flex-row items-center">
          <Grid />
          <Content content={contentList[0]} />
        </div>
      </div>
    </section>
  )
}

时间线基本上是具有“年份”和“内容”作为属性的对象列表。内容列表充满了同年的内容。

我正在使用 contentList 动态生成网格单元。它在较大的屏幕上运行良好，网格和内容组件像这样并排显示

在较小的屏幕上，它目前看起来像这样：

我希望网格在较小的屏幕上水平对齐，即列应该变成行，顶部是年份，中间是一行，底部是文本。

这可能与 Tailwind 有关吗？

标签： htmlcsstailwind-css

html - 改变 CSS 网格的方向

问题描述

解决方案

推荐阅读