296 replies

Grid-area, why is my header not spanning across both areas?

https://github.com/callum-laing/react-first-app

I think I've written the code where it needs to be, however could someone please take a look and see if you can find out where I'm missing?

the header is inside Heading.jsx, which has imported inside a <header> tag in app.jsx.

I've got display:grid in index.css (I think this is the right location for it?) and I've created 3 rows, 2 columns..

body {
  display: grid;
  grid-template-areas:
    "header header"
    "section1 section2"
    "section3 section4";
  grid-template-rows: 100px 1fr 1fr;
  grid-template-columns: 1fr 1fr;

body {
  display: grid;
  grid-template-areas:
    "header header"
    "section1 section2"
    "section3 section4";
  grid-template-rows: 100px 1fr 1fr;
  grid-template-columns: 1fr 1fr;

body {
  display: grid;
  grid-template-areas:
    "header header"
    "section1 section2"
    "section3 section4";
  grid-template-rows: 100px 1fr 1fr;
  grid-template-columns: 1fr 1fr;

body {
  display: grid;
  grid-template-areas:
    "header header"
    "section1 section2"
    "section3 section4";
  grid-template-rows: 100px 1fr 1fr;
  grid-template-columns: 1fr 1fr;

GitHub

GitHub - callum-laing/react-first-app

Contribute to callum-laing/react-first-app development by creating an account on GitHub.

Grid-area, why is my header not spanning across both areas?

Similar Threads

Similar Threads

Similar Threads