2

I want to start a blog design from scratch as a week-ends project, but I have problem to see how I can render it via CSS. In a CSS grid system you can define the size of a column based on the number of elements e.g. I have 12 based grid and I can decide to have 2 columns: 2 of the size of 6 or one of 5 and one of 7.

[EDIT] I found a website example that does what I would like to achieve: http://www.by-form.net/

Thanks~

Emil
  • 1,949
  • 2
  • 16
  • 25
Andre Bermillon
  • 31
  • 1
  • 5
  • 1
    *Just adding:* This will become fairly easier when CSS grids are supported by all browsers: http://www.w3.org/TR/css-grid-1/ – m4n0 Nov 18 '15 at 07:37
  • I am a little confused. Do you just want something that looks like the image you posted or you are sound something with it, i.e. showing some info – Gacci Nov 18 '15 at 08:18

4 Answers4

1

The thing about vertical sizing is that it should grow as your content grows, that's why grid systems only include rows with 12 columns, because you'll need your page to grow as the content in it does. As stated before (and I'm not sure if you meant pure CSS grid system when you asked or if you were referring to bootstraps grid system or something similar), you can use a lot of different frameworks to achieve this like Bootstrap or Materialize or even create one yourself (which is a great exercise if your objective is to understand how this works, but not so much if you want to be productive about your project).

ZSnake
  • 158
  • 3
  • 12
1

Thank you for your answers guys,

I found 2 ways to answer that issue:

Andre Bermillon
  • 31
  • 1
  • 5
0

I don't have much knowledge about this but using bootstrap css you can achive the grid system.

check this out

user2982042
  • 100
  • 7
0

Your grid in the image is very complex. I don't think you can achieve a layout like this without any rows or columns that is flexible enough. What I mean by that is, that you surely want the boxes to grow when the content gets bigger. This could be a big problem cause there are so many dependencies to next and previous columns.

I wrote an answer to a similar question showing a variety of CSS Techniques to do layouts. Check it out, it might be helpful here.

Anyway, if you reduce some dependencies and know exactly what the order of the content should be and look like, it would be much easier.

Community
  • 1
  • 1
Type-Style
  • 1,791
  • 1
  • 16
  • 35