An Interest In:
Web News this Week
- April 14, 2024
- April 13, 2024
- April 12, 2024
- April 11, 2024
- April 10, 2024
- April 9, 2024
- April 8, 2024
November 18, 2021 11:15 am GMT
Original Link: https://dev.to/hunzaboy/repeat-auto-minmax-aka-ram-5b5g
Repeat, Auto, Minmax aka RAM
RAM is a great layout pattern for grid layouts in general. It stands for Repeat, Auto, Minmax which entails to the css grid
property of grid-template-columns
to have flexible children and placed automatically in the parent without having to write any extra responsive css. You can use this pattern for images, cards, items etc.
The code looks like below:
<div class="parent"> <div class="child">A</div> <div class="child">B</div> <div class="child">C</div> <div class="child">D</div> </div>
.parent { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-gap: 1em;}
You can use auto-fill
or `auto-fit' depending upon your usecase.
Cover Photo: https://unsplash.com/@helloimnik
Original Link: https://dev.to/hunzaboy/repeat-auto-minmax-aka-ram-5b5g
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To