Advanced CSS Grid: Grid Template Areas


#1

https://www.codecademy.com/courses/learn-css-grid/lessons/css-grid-ii/exercises/grid-template-areas?action=resume_content_item&course_redirect=learn-css

I can’t figure out how they’re coming up with the column and row pixel sizes.

thanks in advance,
Danny


#2
.container {
  display: grid;
  max-width: 900px;
  position: relative;
  margin: auto;
  grid-gap: 10px;
  grid-template-areas: "header header"
                       "nav nav"
                       "left right"
                       "footer footer";
  grid-template-columns: 200px 400px;
  grid-template-rows: 150px 200px 600px 200px;
}

#3

I did happen to read that was the answer. I’m looking more to as how it came to that.


#4

Looking at the areas, there are four rows and two columns (header header, etc.) The header, nav and footer span both columns as one and. left and right are distinct areas but in the same row.

The column widths are only apparent on the left and right, but sum up for the other three so the overal width of the grid is 600px.

The rows are self-evident, one height specified for each row.


#5

how are you getting 600px when the only info given is max-width: 900px?


#6

610px, actually, due to the gutter. Notice the margin auto? That centers to whole thing. HTML content can stretch the size of a container up to the max width.

Just for the fun of it, load up the right div with a whole mess of Lorem Ipsum and see how the container responds.

Disclaimer: This is a sort of grey area since I’ve only dabbled with grid and never actually made full use of it. Having just come into vogue in the past couple of years it never really made it into my sketch book and I no longer write production code.

Using the random image from above, I added it and four paragraphs from the lorem ipsum generator


Was not sure what to expect, exactly, but what I got was no surprise, either. As it turns out, the text did not force the section to grow wider (that we can tell). However, as witnessed by the horizontal scroll bar, the image exceeds the box in which it is contained so stretches something.
<img src="https://codecademy-discourse.s3.amazonaws.com/original/5X/f/8/5/3/f853408f1d32aa56d8345be65a5dd10fd20013e0.png" width="700" alt="width 700">

<p>Lorem ipsum dolor sit amet... </p>

#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.