This content originally appeared on DEV Community and was authored by Aslam Shah
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
This content originally appeared on DEV Community and was authored by Aslam Shah
Aslam Shah | Sciencx (2021-11-18T11:15:45+00:00) Repeat, Auto, Minmax aka RAM. Retrieved from https://www.scien.cx/2021/11/18/repeat-auto-minmax-aka-ram/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.