Last week, as part of an assignment for a Ruby on Rails application, I was given the challenge to create a checkerboard styled page. The design is from and the requirements were as follow: Nelson Sakwa It is a Desktop app (do not worry about mobile friendly) The articles are pulled from the database, ordered by last created and are part of the same category Each row has 4 boxes (image, text, image, text) The following row is the opposite (text, image, text, image) So immediately I thought that this would a job for the CSS Grid. Having spent a month doing Flexbox and CSS Grid as part of the Full Stack Web Development Curriculum I thought why not, this is a great time to take those newly acquired skills for a spin. Microverse To set up the main container for the grid: { : grid; : fr fr fr fr; : ; } .cat-container display grid-template-columns 1 1 1 1 padding-bottom 45px And to style each square in the grid: { : flex; : ; : ; : ; : column; : space-around; } .text-box display padding-left 15px padding-right 15px padding-bottom 0 flex-direction justify-content After testing my page and seeing that everything was positioned in its right place, the next step was to pull data from the database. Back in my controller, I make sure that I am pulling all the articles from their respective Category and ordering them in descending order: @articles = Category .find(params[ ]) .articles .order( ) def show :id 'created_at desc' end Next, in my view and with the help of ERB (Embedded Ruby) I can place my images and articles accordingly: <div <% @articles.each %> <div cover; background- no-repeat; text-box art-author art-title art-text =" - "> class cat container do |article| =" - " =" - : (<%= " class image box style background image url image_path #{article.image}"%>);background-position: center; background-size: repeat: "> </div> <div class=" "> <h2 class=" "><span><%=article.author.name%></span></h2> <h2 class=" "><%= article.title %></h2> <p class=" "><%= article.text.truncate(100) %></p> <%= vote_or_unvote_btn(article)%> </div> <% end %> </div> And, so the result is as follow: I am very happy how this is looking, but it not a checkerboard. I wish to alternate the image and the text for every row... At this point in my assignment I was starting to run out of time and (having thought of multiple ways of tackling this challenge from styling it in the main CSS file to using functions) I decided to just add a few variables in my .erb file: <div <% x = %> <% @articles.each %> <% x == %> <% x = %> <% %> <% x < %> <% x += %> <div cover; background- no-repeat; text-box art-author art-title art-text text-box art-author art-title art-text vote image-box background- url(<%= image_path %>);background- center; background- cover; background- no-repeat; =" - "> class cat container 0 do |article| if 4 0 end if 2 1 =" - " =" - : (<%= " class image box style background image url image_path #{article.image}"%>);background-position: center; background-size: repeat: "> </div> <div class=" "> <h2 class=" "><span><%=article.author.name%></span></h2> <h2 class=" "><%= article.title %></h2> <p class=" "><%= article.text.truncate(100) %></p> <%= vote_or_unvote_btn(article)%> </div> <% else %> <% x += 1%> <div class=" "> <h2 class=" "><span><%=article.author.name%></span></h2> <h2 class=" "><%= article.title %></h2> <p class=" "><%= article.text.truncate(100) %></p> <p class=" "><%= link_to('VOTE', article_votes_path(article_id: article.id), method: :post) %></p> </div> <div class=" " style=" image: " " #{article.image} position: size: repeat: "> </div> <% end %> <% end %> </div> And so the resulting page looks as follow: I am super happy by the way this is looking and ready to continue with testing the main Rails application and to get it ready to deploy into Heroku...
