Building a Grid Framework with Inline-Block's

Grid System and Inline-Block spacing

Demo from Csswizardry you linked uses comment html hack:

<div class="grid__item"></div><!--
--><div class="grid__item"></div>

Check their demo source.

Also updated your jsfiddle

css inline-blocks and bootstrap grid system output

I've created a Bootply for you.

<div class="container">
    <div class="row">

        <div class="col-md-3">
            <div class="img">
                <img src="">
            </div>
        </div>

        <div class="col-md-9">
            <div class="row">
            <div class="col-md-8">
              This is the product name
            </div>
            <div class="col-md-4">
              1 230.99
            </div>
            </div>

            <div class="row">
            <div class="col-md-6">
              Property 1
            </div>
            <div class="col-md-6">
              Property 2
            </div>
            </div>
        </div>

    </div>
 </div>

Having a display: inline-block as a parent to a display: grid element without having text overlap?

The main problem stems from this declaration:

grid-template-columns: repeat(auto-fit, minmax(0, 1fr))

You're setting the columns to shrink to zero width.

Also, 1fr does nothing here, because there is no free space in the container. (You have the primary container set to inline-block, i.e., min-width. This means no extra space.)

At a minimum, these commands appear to be confusing the inline-block algorithm.

Consider leaving the columns at auto width (a default setting).

And, perhaps, setting them to appear in the first row. (I used the grid-auto-flow: column technique.)

.outer {
  background-color: yellow;
  display: inline-block;
}

.stats {
  display: grid;
  grid-gap: 20px;
  grid-auto-flow: column;
}

<div class="outer">
  <div class="stats">
    <div class="stat">
      <strong>Value:</strong> 1,234,568
    </div>
    <div class="stat">
      <strong>Another value:</strong> 98,765
    </div>
    <div class="stat">
      <strong>Test value:</strong> 83,263
    </div>
  </div>
</div>

Make a grid of inline-block elements respond to resize

You can set the width of div.project-item in % instead of a fixed width (px)

e.g

div.project-item{
    width: 30%;
}

So when you resize the window it will adjust.

And if in some point you want to show only two, you can do it using medias

e.g

@media (max-width: 920px){
    div.project-item{
        width: 45%;
    }
}

CSS inline-block list grid

You can use flexbox:

ul {
  display: flex; /* Magic begins */
  flex-wrap: wrap; /* Multiline */
}
ul li {
  flex-grow: 1; /* Grow to fill available space */
}

ul {  display: flex;  flex-wrap: wrap;  list-style: none;  padding-left: 0;  width: 300px;}ul li {  flex-grow: 1;  background: #ccc;  padding: 15px;  margin-right: 1px;  margin-bottom: 1px;  text-align: center;}ul li:hover {  background: #ddd;}

<ul>    <li>lorem</li>    <li>ipsum</li>    <li>dolor</li>    <li>sit</li>    <li>amet</li>    <li>consectetur</li>    <li>adipiscing</li>    <li>elit</li>    <li>Vestibulum</li>    <li>porttitor</li>    <li>nisi</li>    <li>purus</li>    <li>eu</li>    <li>pretium</li>    <li>ipsum</li>    <li>ultricies</li>    <li>eu</li>    <li>Nulla</li>    <li>eleifend</li>    <li>arcu</li>    <li>dolor</li>    <li>et</li>    <li>vestibulum</li>    <li>ligula</li>    <li>lacinia</li>    <li>sed</li>    <li>Sed</li>    <li>viverra</li>    <li>tortor</li>    <li>lorem</li>    <li>molestie</li>    <li>volutpat</li>    <li>nisi</li>    <li>volutpat</li>    <li>a</li>    <li>Suspendisse</li>    <li>dolor</li>    <li>lacus</li>    <li>ultrices</li></ul>

Center grid of inline-blocks within container

As far as I know, this cannot be done without JS. The problem lies with the "wrap" element. In order to center it(and it's contents), the width most not be 100%. However, if you set a fixed width, then the element is no longer fluid.

So basically you can only horizontally center float:left or display:inline-block elements with a "shrink-wrap" effect only if it doesn't reach 100% of it's parent. Once it breaks down to a second line, it's no longer centered.

As you can see from this example in the Fiddle, it cannot be done.

Fiddle: http://jsfiddle.net/gzB5k/4/

use inline-block or table-cell for css grid

Actually display: table is really the solution you are probably looking for (because of your target browsers). It was added to browsers so people could get a grid layout without needing to use a table. You don't even need percentages (the number of columns you add will dictate the width of the children elements).

DEMO

The only real caveat comes in when you are doing mobile browsers and want a dynamic layout shift (media tag) to go from a horizontal list to a vertical list. I guess it is not too big of a deal to add you own media tags (and add a class to the wrapper)...

You probably could get display: inline-block working but make sure you use box-sizing: border-box because when you are working with percentages, even a single px off and things start wrapping..

---

Related Topics