Turning Ordered List into a Grid - modifying the iTunes search tool from Day 2 tutorial

Lucifer · 2024-07-24T16:40:41.052+00:00

I just finished going through the Day 2 tutorial on making an iTunes search tool, and I really want to make the list into a responsive grid style (i.e. change the number of rows & columns based on screen size). Is there any way to do this with the ol element or do I need to recreate it using a table element?

Lucifer
1 year ago
I just finished going through the Day 2 tutorial on making an iTunes search tool, and I really want to make the list into a responsive grid style (i.e. change the number of rows & columns based on screen size). Is there any way to do this with the ol element or do I need to recreate it using a table element?
Janis
1 year ago
You can manually set a css grid by going to the parent container (in your case the OL element) and go all the way down in the styling tab, then under Custom CSS set display:grid
Then you can easily configure the amount of rows and columns with css grid properties and the viewport variable
So no need for a table 🙂
Janis
1 year ago
This is quite handy: https://cssgrid-generator.netlify.app
Lucifer
1 year ago
amazing, thank you, @Janis !
Lucifer
1 year ago
Hmm, is there anyway to make the table "responsive" to viewport? i.e. switching from desktop to mobile should change a 3x3 grid into 1x9.
Lucas G
1 year ago
https://www.youtube.com/watch?v=AfS62T_jDcA
Use breakpoints
Janis
1 year ago
@Lucifer You can also use grid auto fill and adjust the minmax values. It's pretty straightforward - just play with the values until it works like you imagined 🙂

display: grid
grid-gap: 12px
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
❤️1
Janis
1 year ago
If you want even greater control over the amount of columns per viewport width, then take a look at the video Lucas posted above

Turning Ordered List into a Grid - modifying the iTunes search tool from Day 2 tutorial

Lucifer

Janis

Janis

Lucifer

Lucifer

Lucas G

Janis

Janis