1

I am working on this page. As you can see, it's a squarish grid kind of layout. I was wondering if I can position an element that occupies 4 squares (2x2 in the middle), and having the other elements wrap around it, like this:

 _ _ _ _ _ _ _ _
|_|_|_|_|_|_|_|_|
|_|_|_|_|_|_|_|_|
|_|_|_|   |_|_|_|
|_|_|_|_ _|_|_|_|
|_|_|_|_|_|_|_|_|
|_|_|_|_|_|_|_|_|

I was wondering whether this is even possible? Reliance on JavaScript (vanilla or jQuery) is tolerable for this project.

double-beep
  • 5,031
  • 17
  • 33
  • 41
AKG
  • 2,936
  • 5
  • 27
  • 36
  • Have you considered Twitter's Bootstrap? It should be fairly easy to accomplish something like this using that framework. http://twitter.github.com/bootstrap/ – Jason Towne Jul 24 '12 at 15:48
  • I think [CSS grid](https://css-tricks.com/snippets/css/complete-guide-grid/) should solve this – Jack Apr 21 '19 at 19:02
  • Here's a fiddle using CSS grid: https://jsfiddle.net/nbx37qdy/. I've just learnt how to use grid for this question so it's definitely not implemented with best practices or anything like that. – Jack Apr 21 '19 at 19:25

1 Answers1

0

I think you could do something like this: http://jsfiddle.net/QrEr5/3/

Billy Moat
  • 20,792
  • 7
  • 45
  • 37
  • A bit more comprehensive: http://jsfiddle.net/QrEr5/1/ (Just centered the numbers xd) – scumah Jul 24 '12 at 15:59
  • Thank you very much @Billy, but I forgot to mention I'm generating the lists from PHP. The direction of the content is horizontal till it breaks and wraps on the next line – AKG Jul 24 '12 at 16:01
  • @AKG - Is that not what my demo is doing? All of the container divs are just floating left which makes the content horizontal. It breaks onto a new line when the width of the wrapper is reached. – Billy Moat Jul 24 '12 at 16:20
  • @BillyMoat Maybe I didn't phrase my question properly... 8 'boxes' go onto one line, but I want to insert a big box of 2 x 2 boxes somewhere in the center. Your example is doing that, but it's displaying a Z pattern, if you get what I mean. – AKG Jul 24 '12 at 16:25