CSS сетка со стилизованными Компонентами: Компоненты внутри элемента сетки перекрывают сетку, что не так? - PullRequest
Новая
       18

CSS сетка со стилизованными Компонентами: Компоненты внутри элемента сетки перекрывают сетку, что не так?

0 голосов
/ 04 апреля 2020

Я создал стилизованные компоненты, чтобы сформировать сетку в реакции. Теперь компоненты в контейнере сетки перекрывают ширину сетки, и я не понимаю, почему ...

Я программирую с реагировать. Поэтому я использую стилизованные компоненты для стилизации своей страницы.

grid layout

Компоненты с черной рамкой - это сетка. Теперь проблема в том, что красный, который должен быть внутри контейнера с сеткой посередине, больше, чем должен быть.

Мой код: Определенная сетка: 

export const BaseContainer = styled.div`
/*defines the grid of the page */
  display: grid;
grid-template-columns: 20% 60% 20%;
grid-template-rows: 5% 90% 5%;
grid-column-gap: 0px;
grid-row-gap: 0px;

  margin-left: auto;
  padding-left: 2px;
  margin-right: auto;
  padding-right: 2px;
  min-width: 99vw;
  min-height: 99vh;

  border: 3px solid black;
`;

/*Chat container on the left side of the grid*/
export const ChatContainer = styled.div`
/* defines the position in the grid */
grid-area: 2 / 1 / 3 / 2;
padding-left: 2px
padding-right: 2px

border: 3px solid black;
`;

/*leaderboard container on the right side of the grid */
export const LeaderboardContainer = styled.div`
/* defines the position in the grid */
grid-area: 2 / 3 / 3 / 4;
padding-left: 2px
padding-right: 2px

border: 3px solid black;
`;

/* center container of the grid which contains for example the menu bar */
export const CenterContainer = styled.div`
/* defines the position in the grid */
grid-area: 2 / 2 / 3 / 3;
padding-left: 2px
padding-right: 2px


border: 3px solid black;
`;

Мой другой Контейнеры: 

const FormContainer = styled.div`
margin-top: 2em;
display: flex;
flex-direction: column;
align-items: center;
min-height: 300px;
justify-content: center;

max-width: 100%;

border: 3px solid red;

`;

export default FormContainer;

const Form = styled.div`

display: flex
flex-wrap: wrap;
  justify-content: center;
  width: 800px;
  height: 375px;
  font-size: 16px;
  font-weight: 300;
  padding-left: 37px;
  padding-right: 37px;
  border-radius: 5px;

background: #F8E7D1;
border: 13px solid #DDC18E;
box-sizing: border-box;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);


  /* &:hover {
    background: ${props => (props.shouldHover ? "red" : "none")};
    cursor:pointer;
  } */
`;
export default Form;

И мой код, в котором я использую эти компоненты: 

const FormContainerLogin = styled(FormContainer)`
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;
margin: auto;

height: 315px;


`;    


render() {
        return (
            <BaseContainer>
                <ChatContainer>
                    <Blue>Chat</Blue>
                </ChatContainer>
                <CenterContainer>
                    <FormContainerLogin>
                        <Blue>Form Container</Blue>
                        <Form>

                        </Form>
                    </FormContainerLogin>
                </CenterContainer>
                <LeaderboardContainer>
                    <Blue>Leader board</Blue>
                </LeaderboardContainer>
            </BaseContainer>
        );
      }
    }

Теперь моя проблема в том, что "FomrContainerLogin" находится внутри "CenterContainer", но он перекрывает этот контейнер и Я не понимаю, почему и как я могу этого избежать. Может кто-нибудь помочь мне, пожалуйста?

...