Home > performance > Simple grid system made out of CSS columns

Simple grid system made out of CSS columns

April 15Hits:3
Advertisement

I have been researching and experimenting with HTML5 and CSS3. I was aiming to create a very simple but efficient tiled gallery / grids. So some sort of grid system that I can layout anything inside.

Below is what I have created, what are your opinions? I also have a question, why the distributing of the images change from browser to another? Is there a way to control it?

Here is a working Fiddle.

HTML:

<div class="grids">     <div class="gridElement">         <img alt="image" src="assets/images/image.jpg">     </div>     <div class="gridElement">         <img alt="image" src="assets/images/image.jpg">     </div>     <div class="gridElement">         <img alt="image" src="assets/images/image.jpg">     </div>     <div class="gridElement">         <img alt="image" src="assets/images/image.jpg">     </div>     <div class="gridElement">         <img alt="image" src="assets/images/image.jpg">     </div>     <div class="gridElement">         <img alt="image" src="assets/images/image.jpg">     </div> </div>  CSS: /*Grids System*/  .grids {     width: 100%;     overflow: hidden;     -webkit-column-count: 3;     -moz-column-count: 3;     column-count: 3;     -webkit-column-gap: 10px;     -moz-column-gap: 10px;     column-gap: 10px; } .grids.twoGrids {     -webkit-column-count: 2;     -moz-column-count: 2;     column-count: 2; } .grids.fourGrids {     -webkit-column-count: 4;     -moz-column-count: 4;     column-count: 4; } .grids .gridElement {     margin-bottom: 10px;     overflow: hidden;     -webkit-backface-visibility: hidden;     -moz-backface-visibility: hidden;     -ms-backface-visibility: hidden; } .grids .gridElement:last-child {     margin-bottom: 0; } .grids .gridElement img {     min-width: 100%; } 

Answers

There are a few good reasons why no one uses the multi-column module for "grids".

They are rigid

There are only 2 options for the column-span property: none or all. Want to have elements spanning 2 columns? Too bad. Also, last time I checked, Mozilla does not support the column-span property.

They are unpredictable

Each browser has its own algorithm for determining how to generate the columns. If you read the specification, column-count is not a guarantee that you will get the specified number of columns:

describes the optimal number of columns into which the content of the element will be flowed. Values must be greater than 0. If both ‘column-width’ and ‘column-count’ have non-auto values, the integer value describes the maximum number of columns.

From: http://www.w3.org/TR/css3-multicol/#column-count

The emphasis is mine: in an ideal situation, you'll get the exact number of columns you've specified. If the browser's algorithm decides that there's not enough room for that many, it will give you less.

Controlling where breaking occurs is a nuisance

Since you're using images for testing, you're not seeing the problem. Using columns on a parent container doesn't just control how the children flow, but all descendant elements. What this means is that your gridElement will frequently span multiple columns in an effort to equalize the height of the columns. You can specify where breakage occurs (or shouldn't occur) on the descendant elements like so:

.foo {
  -webkit-column-break-inside: avoid; /* Deprecated property name for Webkit (Blink too?) */
  page-break-inside: avoid; /* Non-standard property name for Mozilla */
  break-inside: avoid;
}

http://codepen.io/cimmanon/pen/CcGlE

TL;DR

This system is designed with text in mind, not grids. I predict that if you were to pursue this further, you'll end up being dissatisfied due to the limitations of the module as it is currently specified. If you're just planning to use this with images, my last point above does not apply.

Very impressive! I forgot that this tech existed. Anyways, off to review:

Prefixes and Indentations

column-count will be bound to prefixes for quite a while, since only a few browsers like IE (amazing!) support it. So when it comes to prefixes, the most common formatting style is a cascaded indentation. Makes it more readable.

-webkit-column-count: 3;
   -moz-column-count: 3;
        column-count: 3;

Usable Dimensions

Ok, it's neat that the layout can flex fluidly, but is it still usable past a given dimension? Like say below 480px? It would most likely break the innards of the cells in the column. Same goes for large screens. Do you think 3 column layout still looks good on a 1920x1024 screen? With all the things very spacey and images zoomed out?

I suggest placing a min-width for the .grid. 480px should be the least, since most 4in mobile phones are at least 480px wide when on portrait. As for maximum, it's your call. You can set a hard maximum around 1024px to 1440px or adjust the columns as you go bigger, like say go 4 columns beyond 1440px. You can use media queries for this one.

Tweaks

Here are some more tweaks:

Target the images

.grids .gridElement img{
  min-width : 100%
}

This would set all descendant images to 100% width. This will break a lot of images under a grid element. You can target them specifically so that only they will be affected. You can also isolate them in <div> to further denote that they are not part of the content but in a heading, like pinterest.

<div class="gridElement">
    <div class="post">
      <img alt="image" src="http://www.csctradeshow.com/images/female.png">
    </div>
    <div class="stuff">
      <!-- pin buttons, like buttons, comments etc -->
    </div>
</div>

.grids > .gridElement > .post > img {
  width: 100%;
}

Skip the .gridElement

You can skip .gridElement and use div instead. We all know the only children of .grid is the elements of the grid. Saves you a few characters on the HTML side.

<div class="grid">
    <div>
        <div class="post">
          <img alt="image" src="http://www.csctradeshow.com/images/female.png">
        </div>
    </div>
    ...
</div>

.grids > div > .post > img {
  width: 100%;
}

Related Articles

  • Simple grid system made out of CSS columnsApril 15

    I have been researching and experimenting with HTML5 and CSS3. I was aiming to create a very simple but efficient tiled gallery / grids. So some sort of grid system that I can layout anything inside. Below is what I have created, what are your opinio

  • Custom bootstrap like grid system with HTML and CSS February 7

    How to implement Custom bootstrap like grid system with HTML and CSS? Or how does bootstrap internally implement grid system ? --------------Solutions------------- As Won Jun Bae suggested, the best way to learn it to check out Bootstrap CSS files. H

  • Need to create a very simple grid/gallery/css "table" layout inside channel:entries- without pluginsSeptember 25

    Trying to make some quick fixes for a client, despite being more or less a total EE n00b (I typically do more home-rolled CMS stuff). I'm trying to do a very simple grid layout, x rows by 3 columns, inside a channel entries block. This mostly works:

  • My Grid system using bootstrap is not working properly

    My Grid system using bootstrap is not working properlyJanuary 25

    I wrote simple grid system using bootstrap and compiled in chrome. but those grid system is not displaying properly. code:- <!doctype html> <html> <head> <title>Gris system</title> <link rel="stylesheet" href=&qu

  • Designing for the Web: Templates and Grid Systems

    Designing for the Web: Templates and Grid SystemsDecember 12

    Continuing on from the previous article in this series, Designing for the Web: Resolution and Size, we cover some helpful and important factors while creating a template for designing a website. In this article, we will cover some important issues an

  • Understanding CSS Grid Systems from the Ground UpMarch 11

    Over the past few years CSS grid systems have grown a lot in popularity, quickly becoming considered best practice for rapid layout scaffolding. As a result, there has been no shortage of frameworks popping up offering their own grid systems trying t

  • Simple mobile-first/responsive Grid System (w/ IE8 Support)March 18

    I now use a grid system similar to that of the one created by André Luís located here: http://andr3.net/blog/post/142 and evolved by Lea Verou located here: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ Made my first g

  • My 960 grid system has wider columns that standard. 55px instead 40px for 16 columnsOctober 27

    I was surprised to discover my website is wider than is supposed to be. I am using Drupal + Omega Theme that uses 960 grid system. The total width of the site is 1180 instead 960. The columns are wider: On 16 columns options: they are supposed to be

  • Anyone using 960 Grid System or YUI 2 Grids CSSApril 13

    Anyone having experience with 960 Grid system and getting it to play nicely with SharePoint? I am intrested in experience from other CSS Framework and how successfull was your team in implementing this? --------------Solutions------------- I'm using

  • How to choose a CSS grid system for new theme?August 4

    I am going to make a new responsive theme based on an existing base theme for drupal 6. The theme need to be minimal but flexible. As there are many CSS grid systems to choose from, I've read that 960.gs has fallen out of fashion as it is too small f

  • Should I use a CSS grid system for this template?

    Should I use a CSS grid system for this template? February 13

    This might be the wrong place to ask but... I want to convert the following template to HTML and CSS. Should I use a grid system such as bootstrap or skeleton? Seeing as it's already a grid it seems to make sense. I get the feeling that bootstrap wou

  • Blocks and CSS Grid Systems

    Blocks and CSS Grid SystemsSeptember 12

    How do I achieve the following in Drupal: <div class="row"> <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> <div class="col-xs-4

  • Mixing the classic type size scale, grid systems and modular scalesNovember 25

    I'm coming from a programmers background and just trying to understand how sizes should relate. I read in the book "designing for the web" that these are the classic type sizes and text set in these size should look better if typeset correctly.

  • A Creative Grid System With Sass and calc()March 27

    Before we even get started talking about Sass and the code for this project, let me remind you this is no more than a quick experiment which by no means should be used in a live context. So what follows is only a proof of concept of what we could do

  • Bootstrap's Grid System vs. Susy: A Comparison

    Bootstrap's Grid System vs. Susy: A ComparisonAugust 29

    There are a lot of grid frameworks for us the to choose from while developing websites nowadays. Of the many frameworks, one of most loved and yet most hated framework is definitely Bootstrap. Today, I'll like to introduce you to a slightly lesser kn

  • Understanding Bootstrap's Grid System

    Understanding Bootstrap's Grid SystemNovember 11

    Bootstrap is undoubtedly one of the most popular front-end frameworks. With more than 73k stars and 27k forks, Bootstrap is also one of the most popular GitHub repositories. In my last article, Responsive Web Design Tips from Bootstrap's CSS, I expla

  • Creating a Responsive Grid System with Susy and BreakpointDecember 9

    The big appeal behind CSS frameworks (like Bootstrap and Foundation) is that they come with a responsive grid system all set and ready to go. The downside is that you have to be content with their column count, the width of their gutters, and all the

  • How to create interfaces in a graphics editor for responsive grid systems considering that they aren't pixel-perfect? September 7

    Any responsive CSS grid system uses long decimal point percentage values for columns' width (e.g. "16.66666667%"). I don't understand how to lay out the grid in Photoshop, because elements of the interface will either be longer, or shorter than

  • Introducing sGrid: A Stylus-based Flexbox Grid SystemDecember 2

    After reading the title of this post, you might ask: Why another grid system? This is a good question. Basically there are plenty of grids out there and many of them are flexbox grids too. So why have I built another tool that's similar? The short an

  • Bootstrap Grid System on mobiles?February 11

    See the following JSFIDDLE <div class="row"> <div class="col-md-3 col-xs-6"> <div style="background: blue;"> test & test & </div> </div> <div class="col-md-3 col-xs-6"> &l

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.714 s.