Изменить ориентацию сетки CSS

Question

Я хочу превратить все столбцы в строки для небольших устройств. Можно ли сделать это с помощью 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. Он отлично работает на больших экранах, при этом компоненты Grid и Content отображаются рядом, вот так.

На небольших экранах это сейчас выглядит так:

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

Возможно ли это сделать с попутным ветром?

Answer 1

Вам просто нужно установить столбцы сетки на 1fr.

пример: grid-template-columns: 1fr

Вам нужно будет найти аналог этого с попутным ветром.