Use the Photo Module to Create a Responsive Modular Grid
This example is similar to Example 38, except this one will use a Beaver Builder Column as the Grid Container
, and the Photo modules will be the Grid Items
. So that is why I am using [fl_col]
instead of [fl_row]
.
Edit: I didn't mention this in the video, but I changed the grid-template-columns
property to 1fr 1fr
for screen sizes less than 500px.
[fl_col] .fl-photo-content, [fl_col] .fl-photo-img { width:100%; border-radius:10px; } [fl_col] { display:grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); grid-gap:10px; grid-auto-flow:dense; } [fl_col] .tall { grid-row: span 2; } [fl_col] .wide { grid-column: span 2; } [fl_col] .big { grid-column: span 2; grid-row: span 2; } @media screen and (max-width: 500px) { [fl_col] { grid-template-columns: 1fr 1fr; } }
![kitten 1 kitten 1](https://mrfent.com/wp-content/uploads/2020/03/kitten-1.jpg)
![kitten 2 kitten 2](https://mrfent.com/wp-content/uploads/2020/03/kitten-2.jpg)
![kitten 3 kitten 3](https://mrfent.com/wp-content/uploads/2020/03/kitten-3.jpg)
![kitten 4 kitten 4](https://mrfent.com/wp-content/uploads/2020/03/kitten-4.jpg)
![kitten 5 kitten 5](https://mrfent.com/wp-content/uploads/2020/03/kitten-5.jpg)
![kitten 6 kitten 6](https://mrfent.com/wp-content/uploads/2020/03/kitten-6.jpg)
![kitten 7 kitten 7](https://mrfent.com/wp-content/uploads/2020/03/kitten-7.jpg)
![kitten 8 kitten 8](https://mrfent.com/wp-content/uploads/2020/03/kitten-8.jpg)
![kitten 9 kitten 9](https://mrfent.com/wp-content/uploads/2020/03/kitten-9.jpg)
![kitten 10 kitten 10](https://mrfent.com/wp-content/uploads/2020/03/kitten-10.jpg)
![kitten 11 kitten 11](https://mrfent.com/wp-content/uploads/2020/03/kitten-11.jpg)
![kitten 12 kitten 12](https://mrfent.com/wp-content/uploads/2020/03/kitten-12.jpg)
![kitten 13 kitten 13](https://mrfent.com/wp-content/uploads/2020/03/kitten-13.jpg)
![kitten 14 kitten 14](https://mrfent.com/wp-content/uploads/2020/03/kitten-14.jpg)
![kitten 15 kitten 15](https://mrfent.com/wp-content/uploads/2020/03/kitten-15.jpg)
![kitten 16 kitten 16](https://mrfent.com/wp-content/uploads/2020/03/kitten-16.jpg)
![kitten 17 kitten 17](https://mrfent.com/wp-content/uploads/2020/03/kitten-17.jpg)
![kitten 18 kitten 18](https://mrfent.com/wp-content/uploads/2020/03/kitten-18.jpg)
![kitten 19 kitten 19](https://mrfent.com/wp-content/uploads/2020/03/kitten-19.jpg)
![kitten 20 kitten 20](https://mrfent.com/wp-content/uploads/2020/03/kitten-20.jpg)
![kitten 21 kitten 21](https://mrfent.com/wp-content/uploads/2020/03/kitten-21.jpg)
![kitten 22 kitten 22](https://mrfent.com/wp-content/uploads/2020/03/kitten-22.jpg)
![kitten 23 kitten 23](https://mrfent.com/wp-content/uploads/2020/03/kitten-23.jpg)
![kitten 24 kitten 24](https://mrfent.com/wp-content/uploads/2020/03/kitten-24.jpg)
![kitten 25 kitten 25](https://mrfent.com/wp-content/uploads/2020/03/kitten-25.jpg)
![kitten 26 kitten 26](https://mrfent.com/wp-content/uploads/2020/03/kitten-26.jpg)