Tailwind css image grid

########### Responsive Grids ###############

<div class="flex flex-wrap">
  <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-gray-500"></div>
  <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-gray-400"></div>
  <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-gray-500"></div>
  <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-gray-400"></div>
  <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/6 mb-4 bg-gray-500"></div>
  <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/6 mb-4 bg-gray-400"></div>
</div>

Similar codes

-2 votes360 views3 answers
How to highlight text in css
CSS
0 vote382 views1 answer
Css list line spacing
CSS
1 vote375 views1 answer
How to disable margin collapsing
CSS
0 vote377 views2 answers
Icon inside a circle css
CSS
0 vote381 views1 answer
Css - global -Typogryphy
CSS
3 votes328 views2 answers
Bootstrap 5 pagination
CSS
0 vote371 views1 answer
Box-sizing border-box vs content-box css
CSS
0 vote349 views2 answers
Using materialize css with react
CSS
5 votes387 views2 answers
How to rotate image 360 degrees in css
CSS
1 vote325 views2 answers
CSS transform properties are used to change the shape and position of the selected objects. The transform-origin property specifies the location of the element's transformation origin. By default, what is the location of the origin?
CSS