Breaking News: Grepper is joining You.com. Read the official announcement!

example grid layout template styled componanet

Thoughtless Tarsier answered on December 15, 2021 Popularity 7/10 Helpfulness 1/10

answer example grid layout template styled componanet

example grid layout template styled componanet

Comment

-1

const GridLayout = styled.div`
  height: 100vh;
  display: grid;
  grid-template-areas:
    "nav nav nav"
    "asideLeft main asideRight"
    "footer footer footer";
  grid-template-rows: 1fr 9fr 1fr;
  grid-template-columns: 1fr 6fr 1fr;
`;

const Nav = styled.nav`
  grid-area: nav;
`;
const AsideLeft = styled.aside`
  grid-area: asideLeft;
`;
const AsideRight = styled.aside`
  grid-area: asideRight;
`;
const Main = styled.main`
  grid-area: main;
`;
const Footer = styled.footer`
  grid-area: footer;
`;

Popularity 7/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: grid-layout whatever

Link to this answer
Share Copy Link