Search code examples
csscss-grid

Layout with system grid

code:

<GridContainer>
  <NewsWrapper />
  <News2Wrap>
    <div>a</div>
    <div>b</div>
    <div>c</div>
  </News2Wrap>
</GridContainer>

css:

export const GridContainer = styled.div`
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1.42fr;
  grid-column-gap: 10px;
  grid-row-gap: 15px;
  margin-top: 50px;
  background: red;
  height: 500px;
`;
export const NewsWrapper = styled.div`
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 15px;
  grid-row: 1/2;
  background: yellow;
`;

export const News2Wrap = styled.div`
  width: 100%;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-column-gap: 5px;
  grid-row-gap: 15px;
  grid-row: 2;
  background: orange;
  & > div:nth-child(1) {
    grid-row: 1/4;
    grid-column: 1;
    background: green;
  }
  & > div:nth-child(2) {
    grid-row: 1/2;
    grid-column: 2;
    background: blue;
  }
  & > div:nth-child(3) {
    grid-row: 2/4;
    grid-column: 2;
    background: black;
  }
`;

I'm trying to make a grid container where I can

 left: 1 column 1 row right - top: 1 row 1column right bottom: 2 column

I'm trying to reach that goal, but I'm not succeeding:

enter image description here

example:

https://codesandbox.io/s/twilight-mountain-t1c1m

Solution

  • If you divide your parent grid into 8 squares (2 rows each containing 4 squares) you can define the areas of each news item.

    When defining each area, it's very important you think in terms of lines:

    Vertically:

    • the top line (ie. where the top border of the parent would be) is line number 1 (not 0!)
    • the next line is 2
    • the last line (ie. where the bottom border of the parent would be) of the grid is line number 3

    Horizontally:

    • the leftmost line (ie. where the left border of the parent would be) is line number 1 (not 0!)
    • the next line is 2
    • the next line is 3
    • the next line is 4
    • the last line (ie. where the right border of the parent would be) is line number 5

    So, thinking about the top priority news item in the 2x2 block on the left hand side...

    It extends from:

    • Vertical Line 1 to Vertical Line 3

    and from:

    • Horizontal Line 1 to Horizontal Line 3.

    Using the format:

    grid-area: Start Vertical Line / Start Horizontal Line / End Vertical Line / End Horizontal Line

    this can be described as:

    grid-area: 1 / 1 / 3 / 3

    Working Example:

    .parent {
  display: grid;
  grid-template-columns: 80px 80px 80px 80px;
  grid-template-rows: 80px 80px;
}

.priority-1 {
  grid-area: 1 / 1 / 3 / 3;
  background-color: rgb(191, 0, 0);
}

.priority-2 {
  grid-area: 1 / 3 / 2 / 5;
  background-color: rgb(255, 0, 0);
}

.priority-3 {
  grid-area: 2 / 3 / 3 / 4;
  background-color: rgb(255, 127, 0);
}

.priority-4 {
  grid-area: 2 / 4 / 3 / 5;
  background-color: rgb(255, 255, 0);
}
    <div class="parent">
<div class="child priority-1"></div>
<div class="child priority-2"></div>
<div class="child priority-3"></div>
<div class="child priority-4"></div>
</div>