Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Items grid with inner padding only

What techniques are there for creating a products grid that has padding between each item, but only within the grid? For example, what I am trying to achieve is the below:

enter image description here

Sample markup:

<div id="container">
    <div class="item">
         <!-- content -->
    </div>
</div>

CSS:

#container { width: 100%; min-width: 960px; }
.item { float: left; width: 300px; height: 100px; }

(in the above, .item is going to be output 9 times).

The solution would need to be IE8+ compatible and preferably using a technique that isn't a hack. I have tried using display: table with border-spacing property - but this outputs the padding on the outer sides too.

I know I can also add specific classes to items to control whether the padding is shown for that item, but I was hoping for a more 'automated' solution.

Edit: The padding width should be calculated dynamically, so for example if the container is 960px, the padding is going to be 30px wide.

Secondly, if there are less than 3 items on the last row, these should not appear centered on the row, i.e. if there are only two items then the last 'cell' should just be empty.

EDIT: All the solutions so far insist on specfying the width of the gap/padding. I want to have the padding calculated dynamically. The only width I need to specify is that of .item, which is currently a fixed with of 300px.

like image 751
MAX POWER Avatar asked Apr 27 '14 20:04

MAX POWER


People also ask

Can you add padding to grid?

You can add padding between the grid containers using grid padding or row gap, depending on your needs. Otherwise I would need a more detailed question to solve your issue. Save this answer.

Is padding inside or outside an element?

Padding is the space that's inside the element between the element and the border. Padding goes around all four sides of the content and you can target and change the padding for each side (just like a margin).

Can a grid item be a grid container?

To make an HTML element behave as a grid container, you have to set the display property to grid or inline-grid . Grid containers consist of grid items, placed inside columns and rows.

How do I put a grid inside a div?

To create a nested grid, all you have to do is apply display: grid (or display: inline-grid ) to the grid item and it becomes a grid. You can also apply display: subgrid to create a subgrid. See below for more information on subgrids. Example of a nested grid.


2 Answers

Responsive grid with :

  1. fluid width items
  2. inner fluid gaps between them
  3. IE8+ support (at least)

DEMO

  1. add a general percent margins to the items with percent widths, make sure elements widths + left/right magins = 100%;
  2. compensate the outer margins (between container and items) by setting a negative margin of the same value on the container
  3. add a general wrapper with overflow:hidden;

This is simple and doesn't use any properties unsuported by IE8. I am pretty sure it can have a decent output in IE7 if you remove the borders and the box-sizing property.
Just to make sure, negative margins are not a "hack" :

Negative values for margin properties are allowed source : w3.org

HTML :

<div id="wrapper">
    <div id="container">
        <div class="item"></div>
        <div class="item"></div>
        ...
    </div>
</div>

CSS :

#wrapper {
    overflow:hidden;
}
#container {
    margin: -1.5%;
    background:lightgrey;
}
#container:after {
    content:'';
    display:block;
    clear:both;  /* clear the floats */
}
.item {
    margin:1.5%;
    width:30.3333%;
    padding-bottom:10%;  /* to simulate height on the empty items */
    background:grey;
    border: 1px solid #000;
    float:left;

    /* following only if you want to add borders to the items */
    box-sizing:border-box;
}

After, you just need to change the width of the .items with media query to rearange the number of elements in one row on the desired breakpoints.

Example :

@media screen and (max-width: 600px) {
    .item {
        width:47%;
    }
}
like image 94
web-tiki Avatar answered Oct 18 '22 10:10

web-tiki


Please don't consider this a formal answer. Josh's is clearly elegant.

I like these types of questions because it gives me an opportunity to think of a variety of ways to approach a problem. I've used tables and floated divs to give a total of 4 other ways to do this. If I can think of any more, I'll add them.

The FIDDLE.

The first table in HTML, just to fulfill the SO requirements.

HTML

<table class='table1'>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td></tr>
</table>

"Tables are inelegant" -(except for tabular data)

like image 21
TimSPQR Avatar answered Oct 18 '22 11:10

TimSPQR