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..

    Showing and hiding content

    How do browsers read and interpret CSS?

    R rmarkdown ioslides - How to include a segue slide?

    how to use the CSS contains-element selector with input elements?

    How does calc() CSS property degrade in older browser

    How to show div property that is in a class with javascript

    Issue with floating divs - how can I have the widgets alongside the posts, not below?

    How to have margins not offset my grid

    How can I improve my webpage code to be scalable for smaller sizes?

    How to align a HTML definition list (
    ) horizontally without limiting term or definition in height?

    How to to change CSS double class properties through script

    How do I vertically center align a position:relative element

    Base 64 CSS background image not showing in IE

    How to make gridview in scrollable?

    How Can i Make a column to fill all the way to the sides in bootstrap

    How to align p tag side by side using css?

    How to make a very simple coloured 1-line text area?

    How to add a mailto to a sentence without extra spacing?

    How to do proportionate image gallery supporting both horizontal and vertical aspects?

    How to create a list with three columns in a row by css and html?

    How to display text over an image css [duplicate]

    How to add a new CSS class to a Link Badge if the value is 0?

    How to target individually nested elements using CSS

    How to apply css just to element that curser is on?

    how to change color of href on hover

    How to draw heart using HTML/CSS table?

    How to have an ajax control automatically reference css files

    How can I make a CSS Wrapper adjust height automatically?

    How can i make a div to slide in from right side to left?

    How to move object into the screen from outside via jQuery transition