Search code examples
htmlcssflexboxgrid

How to increase the height and width so that it's on the edge of screen?

I'm trying to make a grid, however I tried to use the width and height on css it doesn't change a thing.

I'm planning to make this The second pic and this is the thing I tried.

.container {
  background-color: #ccc;
  margin: 180px;
  padding: 100px;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 7px 7px;
  grid-template-areas: "A A A A" "B B B F" "C D E F";
  justify-content: center;
}

.A {
  grid-area: A;
  width: 100%;
  height: 20%;
}

.B {
  grid-area: B;
}

.C {
  grid-area: C;
}

.D {
  grid-area: D;
}

.E {
  grid-area: E;
}

.F {
  grid-area: F;
}
<body>
  <div class="container">
    <div class="A">A</div>
    <div class="B">B</div>
    <div class="C">C</div>
    <div class="D">D</div>
    <div class="E">E</div>
    <div class="F">F</div>
  </div>
</body>

I tried to add the width and height on A class. however it did nothing. I also tried to make the responsive thing but haven't added the code because I'm too confused about this.

Solution

  • You need to make the container the full screen height using height: 100vh and set the body margin to 0 to make the container fill the full screen. Then use the fr units in the grid rows and columns to fill the container. There's no need to set the height or width on the grid children as they'll only fill that percentage of the space they've been allocated in the grid. For a good place to start with grid, check out Kevin Powell's video here.

    For the responsive part, I've added a media query and just switched from a 4 column 3 row layout to a 3 column 4 row layout. You've already used grid-template-areas for this which is a great solution for the responsive part. Good luck

    * {
  box-sizing: border-box; /* always useful, makes sure that adding borders does not add to the any defined widths or heights in your css */
}

body {
  margin: 0; /* use this to make sure all the content reaches right to the very edge of the screen */
}

.container {
  /* put a border round the container like the example provided */
  border: 3px solid #9a9a9a;
  border-radius: 0.5rem;

  /* set the padding and the gap the same so the spacing looks even */
  padding: 0.5rem;
  gap: 0.5rem;

  /* set up the grid */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: "A A A A" "B B B F" "C D E F";

  /* set the height of the container to the viewport area, note we need to use the box-sizing: border-box property to ensure the scroll bars don't appear */
  height: 100vh;
}

.container > div {
  /*rather than trying to style the container, just style the child divs. Makes aligning the content much easier */
  background-color: #d9d9d9;

  /* we're also making the child elements type grid so we can place the letters in the center of these really easily */
  display: grid;
  place-items: center;
}

.A {
  grid-area: A;
}

.B {
  grid-area: B;
}

.C {
  grid-area: C;
}

.D {
  grid-area: D;
}

.E {
  grid-area: E;
}

.F {
  grid-area: F;
}

@media screen and (max-width: 600px) {
  .container {
    /* switch to a 3 column, 4 row layout */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 2fr 1fr 1fr;
    grid-template-areas: "A A A" "B B B" "C D E" "F F F";
  }

  .container > div {
    border-radius: 1rem;
  }
}
    <div class="container">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
  <div class="E">E</div>
  <div class="F">F</div>
</div>