CSS Grid

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.
a204801Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Devin BeckerDevOps Associate @ EECommented:
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 Fell, EE MVEDeveloper & EE ModeratorCommented:
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?
a204801Author 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.
Maximize Customer Retention with Superior Service

The IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more to help build customer satisfaction and retention.

Devin BeckerDevOps Associate @ EECommented:
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
a204801Author 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 BeckerDevOps Associate @ EECommented:
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 Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
a204801Author 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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.