CODEWITHSUNDEEP
cssgrid
Grufas
Grufas

Reputation: 1460

Put images in grid with css

can't figure out how to achieve that result (separate logos like in image). Maybe someone can help. enter image description here

Upvotes: 3

Views: 25334

Answers (4)

Matt J
Matt J

Reputation: 119

Maybe something like this

HTML

<div class="container">
    <div class="logo-box" />
    <div class="logo-box" />
    <div class="logo-box" />
    <div class="logo-box" />
    <div class="logo-box" />
    <div class="logo-box" />
    <div class="logo-box" />
    <div class="logo-box" />
</div>

CSS

.container {
    width:980px;
    float:left;
}
.logo-box {
    width:245px;
    float:left;
    height:150px;
}

You can put whatever HTML img tags or CSS background within the .logo-box elements

Upvotes: 2

Jonathan
Jonathan

Reputation: 707

This seems to be a nice solution: http://unmatchedstyle.com/news/building-a-client-logo-grid-with-centered-elements.php - all images centered horizontally and vertically - easy to make responsive - easy to customize specific image sizes - seems to be very cross-browser compatible, even with old crappy IEs

HTML: 

<article class="clients">
    <span></span><img src="images/img-logo2.png" alt="logo" />
</article>

<article class="clients">
    <span></span><img src="images/img-logo3.png" alt="logo" />
</article>

CSS:

article.clients {
    float: left;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 203px;
    height: 150px;
    margin-right: 15px;
    margin-bottom: 15px;
    border: 1px solid #4d4d4d;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
                 border-radius: 3px;
}

article.clients * {
    vertical-align: middle;
}

article.clients span {
    display: inline-block;
    height: 100%;
    width: 1px;
}

Upvotes: 0

Libin
Libin

Reputation: 2462

Just made a quick demo for you. CHECK THIS JSFIDDLE

Here I used background images for creating borders. Just Tweak it!!!

Cheers.

Upvotes: 1

Bernat
Bernat

Reputation: 1556

img{
   float:left;
}

this will work (you should define the height and the width of the img's too)

Upvotes: 0

Related Questions