# Creating a 3x3 grid in CSS

**URL:** <https://forum.kirupa.com/t/creating-a-3x3-grid-in-css/650354>\
**Category:** web dev\
**Created:** [January 7, 2022, 7:10am UTC](https://forum.kirupa.com/t/creating-a-3x3-grid-in-css/650354 "2022-01-07T07:10:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![radmo](https://avatars.discourse-cdn.com/v4/letter/r/e9c0ed/32.png) [@radmo](https://forum.kirupa.com/u/radmo)\
**Post date:** [January 7, 2022, 7:10am UTC](https://forum.kirupa.com/t/creating-a-3x3-grid-in-css/650354/1 "2022-01-07T07:10:13Z")

</div>

Kirupa’s video is the isssue here:

- [Creating a 3x3 Grid in CSS - YouTube](https://www.youtube.com/watch?v=47WMoAfwfkU)

Now how to access the innerHTML etc of a specific element in the grid from Javascript? That is the challenge. It seems the grid layout uses a template to place items, but is there a way to easily access the items from Javascript .  
One scenario I imagine is where you might want to use the location of the item within the grid, but if you change the layout so that it changes position, how does one make the code remain valid or responsive to the CSS change?

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [January 7, 2022, 11:28am UTC](https://forum.kirupa.com/t/creating-a-3x3-grid-in-css/650354/2 "2022-01-07T11:28:16Z")

</div>

You can easily access the elements via the parent:  
e.g.

```auto
let parent = document.querySelector('.parent');
let child1 = parent.children[0];

```

you can loop

```auto
let nodes = parent.children
for(let child of nodes){
console.log(child.innerHTML)
}

```

for CSS you can use the nth of child e.g.  
`.parent:nth-child(1) // child one, CSS is not zero index`

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 7, 2022, 8:02pm UTC](https://forum.kirupa.com/t/creating-a-3x3-grid-in-css/650354/3 "2022-01-07T20:02:52Z")

</div>

If you are trying to figure out the element via a mouse action like a **click** , this article may help simplify this: [Handling Events for Many Elements | KIRUPA](https://www.kirupa.com/html5/handling_events_for_many_elements.htm)

A bookkeeping trick: If you know for sure that you’ll have 3x3 items only, you can add more **class** values or **`data-`** attributes to each of the elements that better describe the column/row.

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [January 7, 2022, 11:14pm UTC](https://forum.kirupa.com/t/creating-a-3x3-grid-in-css/650354/4 "2022-01-07T23:14:15Z")

</div>

There’s a new CSS selector that’s spec’d but nobody’s implemented:

> 15.2. [:nth-col()](https://drafts.csswg.org/selectors-4/#nth-col-pseudo) pseudo-class
> 
> The :nth-col(An+B) pseudo-class notation represents a cell element belonging to a column that has An+B-1 columns **before** it, for any positive integer or zero value of `n`.

I think this will really be a game changer for CSS Grid.

The other one is `CSS Subgrid` but I think all the browsers have dropped the ball on that one because they have implemented `display: contents`