css - What's the best approach to this type of layout? -


I know that I can use margin and padding to accomplish what I want. But, it seems a bit ... I do not know, I feel weird. I think that's another ... structured? How to do this?

Here's what I want to do: Headings and lists in a black div.

How would you suggest that I am going to do this?

Oh man, there's a CSS grid system I'm in love with, it's so easy to implement and understand. Look at it, call it. Although it is done for 960px, making this change is very easy. 

  & lt; Div class = 'container_4' & gt; & Lt ;! - It will be a container that has four grid spots - - & gt; & Lt; Div class = 'grid_1 alpha' & gt; & Lt ;! - It will start with the first column of the container and take one place - & gt; & Lt; H2 & gt; Title & lt; / H2 & gt; & Lt; Li & gt; List item & lt; / Li & gt; & Lt ;! - et cetera - & gt; & Lt; / Div & gt; & Lt; Div class = 'grid_1' & gt; & Lt ;! - It takes the next location and a call - & gt; & Lt; H2 & gt; Title & lt; / H2 & gt; & Lt; Li & gt; List item & lt; / Li & gt; & Lt ;! - et cetera - & gt; & Lt; / Div & gt; & Lt; Div class = 'grid_1' & gt; & Lt ;! - It takes the next location and a call - & gt; & Lt; H2 & gt; Title & lt; / H2 & gt; & Lt; Li & gt; List item & lt; / Li & gt; & Lt ;! - et cetera - & gt; & Lt; H2 & gt; Title & lt; / H2 & gt; & Lt; Li & gt; List item & lt; / Li & gt; & Lt ;! - et cetera - & gt; & Lt; / Div & gt; & Lt; Div class = 'grid_1 omega' & gt; & Lt ;! - It takes the last position and expands a call - & gt; & Lt; H2 & gt; Title & lt; / H2 & gt; & Lt; Li & gt; List item & lt; / Li & gt; & Lt ;! - et cetera - & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - container finish - & gt;   
 Alpha and Omega squads go to first and last grid items in a row.

Comments

Post a Comment