How to fill Frameless grid dynamically?

Tags: html,css,ruby-on-rails,less,responsive-design

Problem :

I am trying to fill the Frameless grid dynamically (with a Rails loop) and it is not quite working out..

I understand LESS and the concept of using @1col (@2cols etc..) as variables. But the example that is presented on the site (or rather that is embedded in the site, shows the use of a large number of hard-coded columns..

Here is the parts of code from

LESS file:

@font-size: 17;
@line: 24;
@em: @font-size*1em;

@column: 48;
@gutter: 24;

   @1col:( 1 * (@column + @gutter) - @gutter) / @em;
  @1cols: @1col;
  @2cols:( 2 * (@column + @gutter) - @gutter) / @em;
  @3cols:( 3 * (@column + @gutter) - @gutter) / @em;
  @4cols:( 4 * (@column + @gutter) - @gutter) / @em;
  @5cols:( 5 * (@column + @gutter) - @gutter) / @em;
  @6cols:( 6 * (@column + @gutter) - @gutter) / @em;
  @7cols:( 7 * (@column + @gutter) - @gutter) / @em;
  @8cols:( 8 * (@column + @gutter) - @gutter) / @em;
  @9cols:( 9 * (@column + @gutter) - @gutter) / @em;
@10cols: (10 * (@column + @gutter) - @gutter) / @em;
@11cols: (11 * (@column + @gutter) - @gutter) / @em;
@12cols: (12 * (@column + @gutter) - @gutter) / @em;
@13cols: (13 * (@column + @gutter) - @gutter) / @em;
@14cols: (14 * (@column + @gutter) - @gutter) / @em;
@15cols: (15 * (@column + @gutter) - @gutter) / @em;
@16cols: (16 * (@column + @gutter) - @gutter) / @em;

.width (@cols:1) {
    width: (@cols * (@column + @gutter) - @gutter) / @em;

 article section, #colophon {
padding: 0 18/@em;
margin: 0 auto;
max-width: @8cols;

#grid {
height: @4cols;
position: relative;
overflow: hidden;

.col {
    background: @highlight;
    height: 100%;
    width: @1col;
    position: absolute;
    left: 50%; top: 0;
    margin-left: 12/@em;

#grid .col {
    .transition(background-color 0.382s ease-out);

    .col2 {margin-left: (1*72+12)/@em;}
    .col3 {margin-left: (2*72+12)/@em;}
    .col4 {margin-left: (3*72+12)/@em;}
    .col5 {margin-left: (4*72+12)/@em;}
    .col6 {margin-left: (5*72+12)/@em;}
    .col7 {margin-left: (6*72+12)/@em;}
    .col8 {margin-left: (7*72+12)/@em;}
    .col9 {margin-left: (8*72+12)/@em;}
    .col10 {margin-left: (9*72+12)/@em;}
    .col11 {margin-left: (10*72+12)/@em;}
    .col12 {margin-left: (11*72+12)/@em;}
    .col13 {margin-left: (12*72+12)/@em;}
    .col14 {margin-left: (13*72+12)/@em;}
    .col15 {margin-left: (14*72+12)/@em;}
    .col16 {margin-left: (15*72+12)/@em;}
    .col17 {margin-left: (16*72+12)/@em;}
    .col18 {margin-left: (17*72+12)/@em;}
    .col19 {margin-left: -(1*72-12)/@em;}
    .col20 {margin-left: -(2*72-12)/@em;}
    .col21 {margin-left: -(3*72-12)/@em;}
    .col22 {margin-left: -(4*72-12)/@em;}
    .col23 {margin-left: -(5*72-12)/@em;}
    .col24 {margin-left: -(6*72-12)/@em;}
    .col25 {margin-left: -(7*72-12)/@em;}
    .col26 {margin-left: -(8*72-12)/@em;}
    .col27 {margin-left: -(9*72-12)/@em;}
    .col28 {margin-left: -(10*72-12)/@em;}
    .col29 {margin-left: -(11*72-12)/@em;}
    .col30 {margin-left: -(12*72-12)/@em;}
    .col31 {margin-left: -(13*72-12)/@em;}
    .col32 {margin-left: -(14*72-12)/@em;}
    .col33 {margin-left: -(15*72-12)/@em;}
    .col34 {margin-left: -(16*72-12)/@em;}
    .col35 {margin-left: -(17*72-12)/@em;}
    .col36 {margin-left: -(18*72-12)/@em;}

    .col1, .col2, .col3, .col4, .col19, .col20, .col21, .col22 {
        background: @emphasis;

HTML file:


            <figure id="grid">
                <div class="col col1"></div>
                <div class="col col2"></div>
                <div class="col col3"></div>
                <div class="col col4"></div>
                <div class="col col5"></div>
                <div class="col col6"></div>
                <div class="col col7"></div>
                <div class="col col8"></div>
                <div class="col col9"></div>
                <div class="col col10"></div>
                <div class="col col11"></div>
                <div class="col col12"></div>
                <div class="col col13"></div>
                <div class="col col14"></div>
                <div class="col col15"></div>
                <div class="col col16"></div>
                <div class="col col17"></div>
                <div class="col col18"></div>
                <div class="col col19"></div>
                <div class="col col20"></div>
                <div class="col col21"></div>
                <div class="col col22"></div>
                <div class="col col23"></div>
                <div class="col col24"></div>
                <div class="col col25"></div>
                <div class="col col26"></div>
                <div class="col col27"></div>
                <div class="col col28"></div>
                <div class="col col29"></div>
                <div class="col col30"></div>
                <div class="col col31"></div>
                <div class="col col32"></div>
                <div class="col col33"></div>
                <div class="col col34"></div>
                <div class="col col35"></div>
                <div class="col col36"></div>


So the columns with classes col2 to col18 start showing up in the middle of the screen and go to the right, columns from сcol19 - col36 go from center to the left..

How can I use this concept with a dynamic creation of columns??

I want to do something like:

   <figure id="grid">
  <% My_model.all.each do |m| %>
   <div class="col col1"> <%= m.content %> </div>
  <% end %> 

This however will start populating the grid from the middle of the screen (due to CSS in .col):

 .col{left: 50%;}

Of course I can switch to left:0 but it kind of negates the concept of Frameless (pt. 3 in :

  1. Center it in the viewport. Align your grid horizontally to the middle of your viewport. For a grid with an even number of columns (pictured), align the center point of your viewport in the middle of the gutter between your two centermost columns. For an odd-numbered grid, align it in the middle of your centermost column.

So how do I stick to this concept but a create / populate columns dynamically from a loop ?

Solution :

So since this question got a vote..

Here is how I recreated the grid via Rails erb code (keeping the absolute positioning). I needed a column about 12 columns wide so I just looped to the left and to the right.

Added to LESS file:


    width: @6cols;
    height: @2cols;
    margin-bottom: @gutter/@em;


def index
    @counter = 0
    @ticker =  0


<figure id="grid">
        <% MyModel.all.each_with_index do |p, i| %>         
    <div class = "contain" >                
            <% @counter = @counter + 2 %>               
            <div class="col col<%= @counter  %>" id ="message_text"> <%= @counter %> || <%= i %> 

                <% if @counter == 5  %>
                    <% @counter = 18 %>
                        <div class ="return"></div>
                <% elsif @counter == 24 %>
                    <% @counter = -1 %> 
                            <% if  @ticker == 0 %>

    <div class ="return"></div>
                        <% end %>

                <% end %>
        <% @ticker = 1 %>               
        <% end %> 

Here is, however a better (more real-world-like) example, of doing a fixed-width column responsive grid :

LESS file:

@column: 85;    // The column-width of your grid in pixels
@gutter: 20;    // The gutter-width of your grid in pixels
@half_gutter : @gutter / 2;

@model_fix : 7.5/@em;

#build figure {
    height: 100%;
    background: @background;
    position: absolute;
    overflow: none;
    margin: 0 @gutter/@em;


#build .col {
    float: left;
    left: 0;
        background: white;


.col {

    height: @1col;
    width: @1col;
    position: absolute;
    margin: 0 @half_gutter/@em @gutter/@em @half_gutter/@em;


@media screen and (min-width: 78.750em) {

    .offset {
    left: 50% -  @8cols ; 


    #build figure {
        height: 100%;
        background: @background;
        position: relative;
        overflow: none;
        margin: 0 auto 0 (@half_gutter - 4)/@em;
        width: @12cols + @gutter/@em;


.message_text .col {
    width: @2cols;
    height: @2cols - @model_fix*2;
    position: relative;
    color: @grey_text;


.message_text #mess_text{
    font-size: 14/@em;
    margin: @half_gutter / @em;

HTML file:

    <section id="build">                
        <figure id = "models" class ="offset">
            <% @scenes.each_with_index do |s, i | %>
                <div class ="message_text ">
                    <div class="col">
                        <div id = "model_text" >

                <%= link_to s.title, scene_path(s) %> 

            <% end %>   

    CSS Howto..

    Making breadcrumbs… not as easy as literally making breadcrumbs, how can I get text to be inside?

    How to include PHP code in CSS?

    jQuery & CSS: how to convert this drawer menu from left to right?

    How to create Box Shadow rollover and hover css navigation?

    How to change CSS when it's ng-disabled?

    CSS How to get rid of border that appears around custom button on and after click

    How to match a comment node with the Jsoup selector api?

    How to convert css long to css one line style with Notepad++

    in slick slideshow, just want center slide to be active

    How to align both vertically and horizontally in CSS?

    Responsive CSS, How to make clock maintain position with image on resize

    how to make an odd shaped html/css menu?

    How do I go about targeting the literal “first-child” of a div, styling depending on element type

    How to give border to any element using css without adding border-width to the whole width of element?

    How to make css transform-origin property work in IE7 and IE8?

    How to vertically align a DIV next to an image?

    How to create the equivalence of CSS “ease” in jQuery?

    How to get hoverover text to be at the same line-height as the triggering text

    How to style an menu with CSS

    SVG, how to evaluate the property of the svg object

    How to display “a” to full of the line

    How to make only background image transparent in responsive square grid?

    How to apply a complex style to the selection of a Select2 component?

    Show X inside the body tag of a php file in case the screen size is smaller than Y

    How to disable and enable css rule

    How to use absolute positioning without overlap effect

    With css, how to ensure wrap on span boundary?

    How to change color of Bootstrap warning class table row

    How to draw a centered line with a rectangle to one side in CSS

    Should I turn these images into a sprite, and if so, how would I do so? (picture included)