Confusion over CSS Grid

HTML-CSS
1

As I have started to use Flexbox and CSS Grid more I have started to understand a bit more how they work - but I’m confused now as according to how I understand CSS Grid my website shouldn’t work at all!

Am I right in thinking that every block element will inhabit one cell on the grid? So if I make a container and set it to display: grid; each <div> within that container will count as one ‘cell’ in the grid. Am I right in thinking that each block element will also take up a cell on the grid?

If that is the case then my website shouldn’t work at all and should just be a complete train crash, because I coded it not realizing this, or not thinking it through but it kinda works.

I was trying to put the following in a grid ‘#projects’

<div id="projects">
      <div id="projects-title"><h2>Here are some of my cool websites!</h2></div>
      <div class="project-tile">
        <h5>Tribute Page</h5>
          <a href="/FCC/Tribute%20Page/">
              <img src="/images/TributeSHOT.png" alt="A picture of my 'Tribute Page'" width="150" height="100">
          </a>
      </div>
      <div class="project-tile">
        <h5>Survey Form</h5>
          <a href="/FCC/Survey%20Form/">
              <img src="/images/SurveySHOT.png" alt="A picture of my 'Survey Page'" width="150" height="100">
          </a>
      </div>

And the H2 title takes up a cell on the grid (fair enough) … but how comes the H5 Sub title doesn’t take up a cell on the grid or the image?

I’m totally confused!

I’m trying to put images inside divs of a different color with a sub-title on the top… and to my thinking now I understand grid a bit more it should just be a complete mess… but it kinda works? Why is that? Is it because they are children of the DIV and CSS Grid knows they are not cells on the grid? I’m confused!

Please don’t give me the solution totally - I want to complete this challenge myself. I just want a bit more understanding of how CSS grid works :slight_smile:

You can see the page I am working on here…

p.s. Please ignore the crazy colours, I set it to crazy colours while I am working and then change them at the end…

2

The grid “sees” the div but not what’s inside it.

Have you checked out a grid generator? Very useful for learning and trying things out.

https://cssgrid-generator.netlify.app/

1 Like
3

Thanks CactusWren2020!

I think it’s me the heat is getting to me! (It’s summer here in the UK).

Haha I starting getting to grips with Flexbox … start using flex for everything then I forget how to use grid. I throw myself into ‘The grid’ then I forget how to use flexbox!

:crazy_face:

4

Yeah, I decided to “specialize” in FlexBox for a while until I got the hang of it. I still prefer it, but if something really looks like a grid, then I’ll google a grid generator and use it :slight_smile:

5

To be honest, in my whole professional career I think I’ve built ~1-2 CSS grids. If you become very good with Flexbox, I think you are able to solve 95% of the use cases.

The only viable use case for a grid I can think of is some sort of responsive image/article grid.

In most apps you probably want to show some data in some sort of table layout, meaning it’s very easy to do this with a flexbox column layout for the outer table and flexbox row layout for the single rows in the table.