Menu icon Foundation
Items are not tiling properly.

I'm trying out Foundation for the first time, and I'm struggling with the grid, which, really does not seem like it would be that difficult, yet, things are not working like I expect!

I want two rows of three images with a caption underneath. I've coded the two sections in different ways to see if it made a difference (it didn't).

I had to zoom out in the browser to show both sections in one photo.

The top section is flowing onto a new row, despite using .small-4.
The second section is stacking... and I don't know why.

Nothing is adding up to more than 12 and I haven't added any padding or margin, so I can't figure out what the problem is.

Screen shot 2016 02 19 at 10.47.04 pm

            

         <section id="recent-sessions">
    <div class="row">
       <div class="small-6 small-centered">
           <h2>Recent Sessions</h2>
        </div>
    </div>
        <div class="row">
            <ul>
                <li class="small-4">
                   <a href="">
                    <ul>
                        <li><img src="assets/images/fashion.jpg" alt=""></li>
                        <li><h3>Dandelion Girl</h3></li>
                    </ul>
                    </a>
                </li>
                <li class="small-4">
                   <a href="">
                    <ul>
                        <li><img src="assets/images/fashion.jpg" alt=""></li>
                        <li><h3>Dandelion Girl</h3></li>
                    </ul>
                    </a>
                </li>
                <li class="small-4">
                   <a href="">
                    <ul>
                        <li><img src="assets/images/fashion.jpg" alt=""></li>
                        <li><h3>Dandelion Girl</h3></li>
                    </ul>
                    </a>
                </li>
            </ul>
        </div>
    </section>
    <section id="recent-posts">
        <div class="row">
           <div class="small-6 small-centered">
               <h2>Recent Posts</h2>
            </div>
        </div>
        <div class="row">
            <div class="small-4">
                <a href="">
                <img src="assets/images/Fashion3.jpg" alt="">
                <h3>Floating</h3>
                </a>
            </div>
            <div class="small-4">
                <img src="assets/images/Fashion3.jpg" alt="">
                <h3>Floating</h3>
            </div>
        </div>
    </section>

gridtileimagesdivullistacking

I'm trying out Foundation for the first time, and I'm struggling with the grid, which, really does not seem like it would be that difficult, yet, things are not working like I expect!

I want two rows of three images with a caption underneath. I've coded the two sections in different ways to see if it made a difference (it didn't).

I had to zoom out in the browser to show both sections in one photo.

The top section is flowing onto a new row, despite using .small-4.
The second section is stacking... and I don't know why.

Nothing is adding up to more than 12 and I haven't added any padding or margin, so I can't figure out what the problem is.

Screen shot 2016 02 19 at 10.47.04 pm

            

         <section id="recent-sessions">
    <div class="row">
       <div class="small-6 small-centered">
           <h2>Recent Sessions</h2>
        </div>
    </div>
        <div class="row">
            <ul>
                <li class="small-4">
                   <a href="">
                    <ul>
                        <li><img src="assets/images/fashion.jpg" alt=""></li>
                        <li><h3>Dandelion Girl</h3></li>
                    </ul>
                    </a>
                </li>
                <li class="small-4">
                   <a href="">
                    <ul>
                        <li><img src="assets/images/fashion.jpg" alt=""></li>
                        <li><h3>Dandelion Girl</h3></li>
                    </ul>
                    </a>
                </li>
                <li class="small-4">
                   <a href="">
                    <ul>
                        <li><img src="assets/images/fashion.jpg" alt=""></li>
                        <li><h3>Dandelion Girl</h3></li>
                    </ul>
                    </a>
                </li>
            </ul>
        </div>
    </section>
    <section id="recent-posts">
        <div class="row">
           <div class="small-6 small-centered">
               <h2>Recent Posts</h2>
            </div>
        </div>
        <div class="row">
            <div class="small-4">
                <a href="">
                <img src="assets/images/Fashion3.jpg" alt="">
                <h3>Floating</h3>
                </a>
            </div>
            <div class="small-4">
                <img src="assets/images/Fashion3.jpg" alt="">
                <h3>Floating</h3>
            </div>
        </div>
    </section>
Kelly Miller over 3 years ago

Oh my goodness! I feel so silly! I was messing with that for hours. They both work now... yay!!

Brian Tan over 3 years ago

Hi Kelly, you are missing class column after small-nn . Also not sure if intermixing ul/li is causing problem with grid layout.
`