时间戳

首页 > 解决方案 > How do I clean up my react code by creating a seperate css grid component that is also mobile friendly?

reactjs - How do I clean up my react code by creating a seperate css grid component that is also mobile friendly?

问题描述

I am hoping to make a grid component out of this that is also mobile friendly. I am hoping to take this entire chunk of code out of app.js and put it into one component file. I am hoping to do this without a seperate css file.

const GridLayout = styled.div`
 height: 100vh;
  display: grid;
  grid-template-areas:
    "nav nav nav"
    "asideLeft main asideRight"
    "leftFooter footer rightFooter";
  grid-auto-rows: 1fr 8fr 1fr auto;
  grid-template-columns: 1fr 5fr 2fr auto 1fr;
`;

const Nav = styled.nav`
      grid-area: nav;
      font-size: calc(20px + 0.25em);
      border-right: 10px solid;
    `;

const AsideLeft = styled.aside`
  grid-area: asideLeft;

  transform: rotate(20deg);
  border-bottom: 25px solid;
  align-self: start;
`;
const AsideRight = styled.aside`
  grid-area: asideRight;
  font-weight: bolder;
  writing-mode: vertical-rl;
  transform: rotate(-20deg);
  border-right: 18px solid;
  justify-content: end;
`;
const Main = styled.main`
  border-top: 15px solid;
  grid-area: main;
`;
const Footer = styled.footer`
  border-top: 20px solid;
  grid-area: footer;
  font-size: calc(10px + 0.25em);
  border-bottom: 40px solid;
`;

Thanks for the help! Its driving me craaazy!

标签： reactjsmobilegridcss-grid

解决方案

您可以首先使用现有的 css 并向您的GridLayout组件添加媒体查询。

const GridLayout = styled.div`
 height: 100vh;
  display: grid;
  grid-template-areas:
    "nav nav nav"
    "asideLeft main asideRight"
    "leftFooter footer rightFooter";
  grid-auto-rows: 1fr 8fr 1fr auto;
  grid-template-columns: 1fr 5fr 2fr auto 1fr;

@media screen and (max-width: /*some size here*/) {
  //some styling here
}
`;

例如在 700px 或更少的屏幕上删除sideRight ...

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

@media screen and (max-width: 700px) {
  grid-template-areas:
    "nav nav nav"
    "asideLeft main main"
    "leftFooter footer rightFooter";
}
`;

*请注意，我确实更改了一些原始样式的属性

推荐阅读