3 Grids besides each other in 10mins
Quickfix solution to placing divs next to each other and placing css grids withins these divs.
Firefighting is what the day threw at me! Not a novice to UI development, at the same time I am not at the top of the game.
I was thrown into a situation where I had to whip up three grids placed side by side. This is what I did with the aid of stackoverflow and google.
Problem 1: Place place 3 divs next to each other.
Add the following styles in your page. The styles can be modified further to include background colour and other details.
Add this div structure and you are good to go. Three divs placed next to each other!
Problem 2: Place a a grid in each of these divs.
The old school method to get this done was by nesting <tr> and <td> tags within <table>.
Neat and faster way to do this — use CSS Grids. Learning basics of CSS grids and setting variable number of columns and rows is a lesson for another day. But if you are looking for a quick fix — its here.
Add the following css styles.
ps: The grid-template-columns attribute indicates the number of columns in the grid. Here we have 2.
ps: Rows are defined in the html construct
Add the following div structure and voila you have a 2X2 grid.
Nest this into the divs built previously to place divs next to each other.
Here is a sample where I used both the solutions.
I’ll leave the finer details for the html Gurus but if you are someone looking for a quickfix like me, this will help.