Как отобразить компоненты карточки react в виде сетки

Я работаю над своей программой по разработке программного обеспечения, и в ней не так много внимания уделяется стилизации. Поэтому я попытался научиться отображать свои приложения react в виде сетки для своих проектов. Я обнаружил, что существует множество причудливых настроек, которые можно сделать при форматировании сетки. Но давайте поговорим о некоторых основах.

При использовании styled-компонентов мы можем делать стилизацию прямо в файле PageList.js. Мы определяем Wrapper как styled-компонент и в нем мы будем использовать наше CSS-форматирование для получения сетки.

import PageCard from "./PageCard"
import styled from "styled-components";

const PageList = ({pages, user}) => {
  const renderPages = pages?.map(page => <PageCard key={page.id} page={page} user={user} />)
    return (
      <Wrapper>{renderPages}</Wrapper>
       )
}  
 const Wrapper = styled.section`
  display: grid ;
  grid-template-columns: auto auto auto;
  grid-gap: .5rem;
`;

export default PageList

Здесь мы отображаем каждую страницу и визуализируем ее внутри нашего компонента Wrapper. Установив для нашего grid-template-columns значение «auto auto auto«, мы установим сетку в три колонки. Если мы установим значение «auto auto«, то сетка будет шириной в две колонки. Я предпочитаю автоматическое форматирование, но если вы хотите, чтобы они имели фиксированную ширину, просто используйте инструменты CSS для установки этой ширины.

Этот же код работает в файле CSS, если вы предпочитаете создавать стили в одном файле.

Thanks for coming to my DEV talk, Happy Coding!