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
p.s. Please ignore the crazy colours, I set it to crazy colours while I am working and then change them at the end…