CSS Grid

a204801
a204801 used Ask the Experts™
on
I have a graphic, shaped in a circle 9 (with 2 extra spots bellow it), its got 10 spots on it.  I want to break this down into 10 pieces, in a grid.

Something like this, 5x6, 'g' represents graphic:

_ _ g _ _
_ g _ g _
g _ _ _ g
_ g _ g _
_ _ g _ _
_ g _ g _

Was hoping for a suggestion on the best CSS to tackle this.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Devin BeckerIdentity Management and Security
Distinguished Expert 2018

Commented:
a204801,

I think you would need to do something like this:
.container-grid {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px 200px;
  grid-template-rows: 300px 300px 300px 300px;
  background-color: gray;
}

Open in new window


the columns represents width and is adjustable, and can use percentages, same with the rows, which represents height.

Then in your HTML would would just select the elements that you would want the graphics in.

Hope this helps,

Devin Becker
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
It would make your life easy to use a css grid. I prefer bootstrap https://getbootstrap.com/docs/4.1/layout/grid/

You can play with different column options.  The grid is 12 columns. Just break everything down accordingly. For the top and fifth rows, you can have one full width column that is centered.  For the others you can use 2 or 3 columns.

If you are trying to piece together sliced images, my suggestion will not be a good solution.  Can you provide more details of what you are doing?

Author

Commented:
They are just stand alone images, that would hopefully form a circle when complete.  If that makes sense.  Its kind of a visual workflow, circular.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Devin BeckerIdentity Management and Security
Distinguished Expert 2018

Commented:
a20480,

As Scott said, this is possible to do with Bootstrap as well, you could use their columns and adjust the size, which will get you a grid of 12 wide. Or you could also use the CSS and adjust the px or percentage size of the grid columns and row heights.

It sounds like for what you would like to do, it might be advisable to split into multiple grids so you can have more of a fine grain control over the sizes.

Hopefully this helps you out,

Devin Becker

Author

Commented:
I was originally thinking bootstrap as well, but I felt it might be wise to ask around.  Maybe Im not thinking of something that would work better.
Devin BeckerIdentity Management and Security
Distinguished Expert 2018

Commented:
a204801,

As I said in my last comment, you could use the CSS grid function to get a more granular control over your grid's column width and height which will allow you to fine tune the grid to get the images how you would like them.

The only other suggestion I might have is that if no variable text(ie. nothing being updated by JS or other) you could just use something like Adobe Illustrator to format the images into ONE LARGE image with any text that you need, which might be better suited for mobile visitors to your site if the image scales properly.

Hope this gives you some options,

Devin Becker
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
They are just stand alone images, that would hopefully form a circle when complete
Do you mean a circular pattern or an actual circle? What happens with a phone, vs tablet vs desktop?  

There is not an easy answer in this case because we don't know exactly what you are doing.  At first, it sounds like the old days when images were sliced and css was used to make a single image.  That was used when you had to worry about dsl and modems.

Without knowing what we are actually working with, another option is to have one image that could be used as a background or forground.

Yet another option is to use a javascript graphing library like d3js https://d3js.org/ http://bl.ocks.org/phuonghuynh/54a2f97950feadb45b07 https://www.visualcinnamon.com/2015/11/learnings-from-a-d3-js-addict-on-starting-with-canvas.html  Some of this can be done in pure css too.

If you can let us know what the actual end product is, we can give better details. Otherwise, all we can do is guess and give some ideas that may spark something for you.

Author

Commented:
They would form circle, then with mobile they can just stack.  I think I got this working nicely with bootstrap, but time will tell.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial