Yes yours uses a lot of HTML compared to mine. I would also suggest that a p element is more semantic for text content but semantics seem to be low on your priorities. At the very least the p elements save a load of characters.
Yes. 
1 Like
This one uses grid:
https://liveweave.com/xeVfLl
If I were to remove grid from it, how would it be written?
That will result in double the number of characters used so is bad advice from AI
You already have examples in flex (and svg) so that question is answered.
The beauty of grid is that you don’t need nested rows of html and empty elements.
Really?
I didn’t know that.
This one does have less: 2059
https://liveweave.com/PGNNak
This one has more: 2682
https://liveweave.com/xeVfLl
You are right.
Is there a way to reduce the duplication of background: green; in the code?
You could add a class to each of the green elements in the html and use that instead.
.bg {background: green}
Can shou show me how to do one of them?
Like this:
<p class="bg">1</p>
<p class="bg">2</p>
<p class="bg">3</p>
<p class="bg">4</p>
<p class="bg">5</p>
<p>6</p>
<p>7</p>
<p class="bg">8</p>
<p class="bg">9</p>
<p>10</p>
<p>11</p>
<p class="bg">12</p>
<p class="bg">13</p>
<p>14</p>
etc...
p.bg{background:green}
1 Like
If you were to convert your version to flex instead of grid.
How would that be written?
Without changing my html it could be written like this in flex:
It’s the margins that create the space so you have to adjust them if you change sizes etc.
Can that be fixed so the flex code works the same way as the grid?
with the grid code:
max-width: 400px;
https://codepen.io/paulobrien/pen/bNbERKV/fed63cb8e17237f436729b613c663bb9
with the flex code:
max-width: 400px;
https://codepen.io/paulobrien/pen/XJrXzdM/ce6e5e409f640b14eef2f058676771ee
Not so easily.
You’d have to convert it all to percentages and you’d probably get rounding errors.
This is roughly it but is out of alignment.
It probably needs the margins in percentages but using calc so that the 4px gap can be included more accurately. I have to go out this evening so won’t be able to look again until tomorrow.
It would probably be easier to go with @DaveMaxwell flex version and fill in all the squares with blank elements so that you don’t need the margins. However I don’t like empty elements which is why the grid version is much superior although a little more effort to set up.
How would your version be written without margins?
I think that is what I meant earlier.
His uses all divs.
Yours uses all p’s.
How much of his code can be put into your code?
Yours uses all: nth-child
Divs or p’s makes no difference apart from semantics and characters. CSS doesn’t care what you use.
Dave’s uses 72 elements for the squares (9 x 8) where all I used was 46 elements. The extra elements in Dave’s example are the blank spaces whereas I used margins to make space and no wasted elements.
That was more than 72 because it had two blank rows on top & bottom, and a set of blank to start and end each row to make the 400px box.
Here’s a slimmed down version - got rid of 1st two rows, and first and last columns. NOW it’s down to 72 elements…
1 Like
With the grid version:
When you do this: max-width: 500px;
The blocks get bigger:
With the flex version, they don’t.
Even with the codepen version that was given above this post.
It does scale in the flex codepen I gave you above but as I said there will be rounding errors as mentioned which would need to be addressed.
In Dave’s example you would just need to use fluid measurements. However I would tweak it so there are no rows divs as you don’t need those because they can all be siblings.
I would do that version like this:
It’s in percentage so just adjust the viewport to see it scale.
2 Likes
Those are rectangles and not squares.
How do you adjust that in he code?