I am currently designing the homepage for this website and I am attempting to arrange the category divs under the header in a grid layout, with 3 divs per row.
I have been trying to achieve this using display:inline-block, but so far, I can only get the divs to display vertically instead of horizontally. I also experimented with float:left, but that led to a different issue altogether.
Is there a solution to effectively organize these divs in a grid format?
Below is the HTML code for each div:
<br /><a href="URL"><div class="home_cat" style="background-image:url('IMAGEURL');">
<p class="home_cat_link">Category Name</p></div></a>
Here is the corresponding CSS:
.home_cat {
background:#14A1C4;
height:180px;
width:29%;
display:inline-block;
margin:5px;
padding:5px;
}
.home_cat_link {
font-size:3em;
font-family: 'Permanent Marker', cursive;
color:#000;
padding-top:80px;
text-align:center;
}
Thank you in advance for any assistance!