CODEWITHSUNDEEP
csszurb-foundation
Andreas
Andreas

Reputation: 345

Foundation block-grid not spacing correctly

I was told the block-grid would space items evenly within the grid. Do I need to add a ".last" or something to the last li element for it to space them evenly? Because this is not evenly spaced, https://i.sstatic.net/qXeCE.png. You can see down below which border belongs to which element.

This is the only HTML in the body section. Using the latest version.

<div class="row">
    <div class="large-12 column" style="border: 1px solid red;">
        <ul class="large-block-grid-4" style="border: 1px solid black;">
            <li><img src="http://placehold.it/150" /></li>
            <li><img src="http://placehold.it/150" /></li>
            <li><img src="http://placehold.it/150" /></li>
            <li style="border: 1px solid blue;"><img src="http://placehold.it/150" /></li>
        </ul>
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>

Upvotes: 0

Views: 373

Answers (1)

BuddhistBeast
BuddhistBeast

Reputation: 2670

Just add a text-align:center; to your main row and be sure you also include the ability for responsiveness by including grid dimensions for medium/small/extra-small devices. Zurb/Bootstrap are built for responsive devices, meaning it should be easy to create a responsive website. View the JSFiddle below to get a better idea of what I am talking about.

DEMO

Upvotes: 2

Related Questions