Without using javascript.
I was told:
just as A Haworth said earlier, the JavaScript is just to render thesame HTML as it is done manually 72 times. The grn and red arrays arethe same as b:bth-child(N+1) (N is the index number so there's a +1offset) in CSS. Go ahead and copy and paste 72 and then in CSS add20 b:nth-child(N+1) {background: green} and then 26 b:nth-child(N+1){background: red}. If you do that and use the CSS posted in my answerit will be the same result. My answer does resolve your problem withor without JavaScript.
For every number (ex. each number is a N) in grn array is a line inCSS: b:nth-child(N+1) {background: green} Next, for every number inred array is a line in CSS: b:nth-child(N+1) {background: red}. Usethe CSS in the answer, add those 46 lines I just explained to you (forthe second time), use the same HTML, and add 72 inside the
<section>.
But I don't understand that.
How would I convert this grid heart to flex?
That is what I am trying to do in the code here:
How would I convert this grid heart layout to a flexbox layout?
I’m trying to achieve the same effect with Flexbox in the code here. Currently, the heart shape is structured using CSS Grid, but I want to explore how to use Flexbox for the same purpose. The main difference is that, while CSS Grid excels at two-dimensional layouts, Flexbox is more tailored for one-dimensional layouts.
For Flex I am thinking this:
Something like this:
{ height: 400px; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; background-color: var(--bg-color); color: white; margin: 1rem auto; gap: 4px;}something like this:
{ display: flex; flex-direction: row; justify-content: center; gap: 4px;}Grid Code:
code: https://liveweave.com/PGNNak
.heart-beat { position: relative; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(8, 1fr); grid-template-areas:"a1 a2 a3 a4 a5 a6 a7 a8 a9""b1 b2 b3 b4 b5 b6 b7 b8 b9""c1 c2 c3 c4 c5 c6 c7 c8 c9""d1 d2 d3 d4 d5 d6 d7 d8 d9""e1 e2 e3 e4 e5 e6 e7 e8 e9""f1 f2 f3 f4 f5 f6 f7 f8 f9""g1 g2 g3 g4 g5 g6 g7 g8 g9""h1 h2 h3 h4 h5 h6 h7 h8 h9"; margin: auto; width: 302px; background: black; color: white; gap:4px; border: 66px solid #000; border-right-width: 49px; border-left-width: 49px;}.heart-beat p{ margin: 0; aspect-ratio: 1 /1; background: red; display:flex; align-items:center; justify-content:center;}p:nth-child(1) {grid-area: a2;background:green;}p:nth-child(2) {grid-area: a3;background:green;}p:nth-child(3) {grid-area: a7;background:green;}p:nth-child(4) {grid-area: a8;background:green;}p:nth-child(5) {grid-area: b1;background:green;}p:nth-child(6) {grid-area: b2;}p:nth-child(7) {grid-area: b3;}p:nth-child(8) {grid-area: b4;background:green;}p:nth-child(9) {grid-area: b6;background:green;}p:nth-child(10) {grid-area: b7;}p:nth-child(11) {grid-area: b8;}p:nth-child(12) {grid-area: b9;background:green;}p:nth-child(13) {grid-area: c1;background:green;}p:nth-child(14) {grid-area: c2;}p:nth-child(15) {grid-area: c3;}p:nth-child(16) {grid-area: c4;}p:nth-child(17) {grid-area: c5;background:green;}p:nth-child(18) {grid-area: c6;}p:nth-child(19) {grid-area: c7;}p:nth-child(20) {grid-area: c8;}p:nth-child(21) {grid-area: c9;background:green;}p:nth-child(22) {grid-area: d1;background:green;}p:nth-child(23) {grid-area: d2;}p:nth-child(24) {grid-area: d3;}p:nth-child(25) {grid-area: d4;}p:nth-child(26) {grid-area: d5;}p:nth-child(27) {grid-area: d6;}p:nth-child(28) {grid-area: d7;}p:nth-child(29) {grid-area: d8;}p:nth-child(30) {grid-area: d9;background:green;}p:nth-child(31) {grid-area: e2;background:green;}p:nth-child(32) {grid-area: e3;}p:nth-child(34) {grid-area: e4;}p:nth-child(35) {grid-area: e4;}p:nth-child(36) {grid-area: e4;}p:nth-child(32) {grid-area: e3;}p:nth-child(33) {grid-area: e4;}p:nth-child(33) {grid-area: e4;}p:nth-child(33) {grid-area: e4;}p:nth-child(33) {grid-area: e4;}p:nth-child(34) {grid-area: e5;}p:nth-child(35) {grid-area: e6;}p:nth-child(36) {grid-area: e7;}p:nth-child(37) {grid-area: e8;background:green;}p:nth-child(38) {grid-area: f3;background:green;}p:nth-child(39) {grid-area: f4;}p:nth-child(39) {grid-area: f4;}p:nth-child(40) {grid-area: f5;}p:nth-child(41) {grid-area: f6;}p:nth-child(42) {grid-area: f7;background:green;}p:nth-child(43) {grid-area: g4;background:green;}p:nth-child(44) {grid-area: g5;}p:nth-child(45) {grid-area: g6;background:green;}p:nth-child(46) {grid-area: h5;background:green;}<div class="heart-beat"><p></p><p></p><p></p><p></p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p>22</p><p>23</p><p>24</p><p>25</p><p></p><p>27</p><p>28</p><p>29</p><p>30</p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>