search

phuocng / csslayout

A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing!
https://phuoc.ng/collection/css-layout
MIT License
8.07k stars 517 forks source link

CSS Grid for `Card layout` #191

Open Xaviju opened 3 years ago

Xaviju commented 3 years ago

I'd like to know why this repo is not using CSS grid for card layout instead of flex.

Current code displays the grid using flex as here: https://github.com/phuoc-ng/csslayout/blob/88200a698329be14ddc916053266ac788697de8f/client/patterns/card-layout/Details.tsx#L36

Instead, it would be simpler and more powerful to implement grid as:

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
}

Am I missing something?

I'll be happy to PR this if you agree.

Xaviju commented 3 years ago

This issue affects also this pattern: https://csslayout.io/patterns/simple-grid/

pragyamishra56 commented 1 year ago

@Xaviju If it would be possible then can you assign me to this issue I want to resolve this would be my first contribution

Xaviju commented 1 year ago

Sorry @pragyamishra56 this is not my repo. This issue was a suggestion to refactor an element layout that has never been responded by the repo owner. You should contact @phuocng

pragyamishra56 commented 1 year ago

@Xaviju How to contact @phuocng to him If you have any good first issues, could you please let me know Sir? I'm new to open source and eager to make contributions.