CODEWITHSUNDEEP
htmlsasszurb-foundation
user2133623
user2133623

Reputation:

How to center align Zurb Foundation block grid elements that are being pushed to the next row?

I'm using the block grid from the Zurb Foundation framework but I'm having some issues getting it to align the way I want to. I have it set so that it displays 4 blocks per row. I have more than 4 blocks so the ones that don't fit are pushed to the next row and aligned to the left. I want it so that those blocks are centered like this:

enter image description here

Is there a way to do that?

Here's what my code is looking like so far:

html

<ul class="small-block-grid-2 large-block-grid-4 thumbslist">
    {% for project in site.data.settings.projects %}
    <li>
    <a href="#" data-reveal-id="myModal{{ forloop.index }}" class="thumb-unit">
        <div class="thumb-overlay">
            <strong>{{ project.name }}</strong>
        </div>
        <div class="thumb" id="{{ project.folder }}" style="background-image: url(assets/img/{{ project.folder }}/thumb.png);"></div>
    </a>
    </li>
    {% endfor %}
</ul>

sass

.thumbslist
  margin: auto
  +clearfix

  li
    position: relative
    //display: inline-block
    display: block
    height: 200px 
    overflow: hidden
    padding: 0

 .thumb
    height: 100%
    width: 100%
    background-size: contain
    background-position: center center
    background-repeat: no-repeat
    padding: 0

Upvotes: 5

Views: 4640

Answers (2)

cimmanon
cimmanon

Reputation: 68319

You need to make your list items not float so you can take advantage of text-align: center on the parent element:

.thumbslist
  margin: auto
  //+clearfix
  text-align: center // add

  li
    position: relative
    display: inline-block // add
    height: 200px 
    overflow: hidden
    padding: 5px
    float: none // add

  .thumb
    height: 100%
    width: 100%
    background-size: contain
    background-position: center center
    background-repeat: no-repeat
    padding: 0

Upvotes: 6

m4n0
m4n0

Reputation: 32285

Here is a modern browsers solution: Use flexbox for your layout and change to small-block-grid-3. Target CSS flex rules on <=991px.

.thumbslist {
  margin: auto;
}
.thumbslist li {
  position: relative;
  display: block;
  height: 200px;
  overflow: hidden;
  padding: 5px;
}
.thumbslist .thumb {
  height: 100%;
  width: 100%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 0;
}
.thumbslist {
  margin: auto;
}
.thumbslist li {
  position: relative;
  display: block;
  height: 200px;
  overflow: hidden;
  padding: 5px;
}
.thumbslist .thumb {
  height: 100%;
  width: 100%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 0;
}
@media (max-width: 991px) {
  .thumbslist {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

<ul class="small-block-grid-3 large-block-grid-4 thumbslist">
  <li>
    <div class="thumb" style="background: grey;"></div>
  </li>
  <li>
    <div class="thumb" style="background: grey;"></div>
  </li>
  <li>
    <div class="thumb" style="background: grey;"></div>
  </li>
  <li>
    <div class="thumb" style="background: grey;"></div>
  </li>
  <li>
    <div class="thumb" style="background: grey;"></div>
  </li>
</ul>

Codeply

Upvotes: 2

Related Questions