Grid Alignment

                      Grid Square Children Alignment

                          Templates

                          Hold or CTRL and hover on item for info.

                          px  ✕

                          px

                          100%

                            1
                              1
                                1
                                1
                                2
                                3
                                4
                                5
                                6
                                7
                                8
                                9
                                1
                                1
                                1
                                1
                                1
                                1
                                1
                                1
                                1
                                1
                                2
                                3
                                4
                                5
                                6
                                7
                                8
                                9
                                1
                                  1
                                    1

                                      CSS

                                      .myGrid {
                                      width: 480px;
                                      height: 480px;
                                      display: grid;
                                      grid-template-columns: repeat(3, 1fr);
                                      grid-template-rows: repeat(3, 1fr);
                                      grid-gap: 16px;
                                      }
                                      .myGrid > div {
                                      background: gray;
                                      }

                                      JSX

                                      <section className='myGrid'>
                                      <div>
                                      1
                                      </div>
                                      <div>
                                      2
                                      </div>
                                      <div>
                                      3
                                      </div>
                                      <div>
                                      4
                                      </div>
                                      <div>
                                      5
                                      </div>
                                      <div>
                                      6
                                      </div>
                                      <div>
                                      7
                                      </div>
                                      <div>
                                      8
                                      </div>
                                      <div>
                                      9
                                      </div>
                                      </section>

                                      ▨▨▨