What is the best way to adjust the height and width to perfectly align with the edge of the screen?

Question

What is the best way to adjust the height and width to perfectly align with the edge of the screen?

Struggling to create a grid here, but no matter what I do with the width and height in CSS, nothing changes.

I'm attempting to replicate this design https://i.sstatic.net/LLXqr.jpg and here's the code I've been experimenting with.

.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>

No luck trying to adjust the width and height of class A. Even attempted to make it responsive, but feel lost in the confusion.

html css flexbox grid

Answer 1

Answer №1

To achieve a full screen height container, utilize height: 100vh and ensure the body margin is set to 0 for the container to occupy the entire screen. Utilize fr units for grid rows and columns to fill the container effectively. Avoid specifying the height or width on grid children as they will automatically adjust within the allocated space. For a comprehensive guide on grid layouts, refer to Kevin Powell's instructional video here.

For responsiveness, implement a media query to switch from a 4 column, 3 row layout to a 3 column, 4 row layout. The use of grid-template-areas for this transition is recommended for optimal responsiveness. Best of luck!

* {
  box-sizing: border-box; /* Important to prevent borders affecting defined widths and heights */
}

body {
  margin: 0; /* Ensures content reaches screen edges */
}

.container {
  /* Add border around container as shown in the example */
  border: 3px solid #9a9a9a;
  border-radius: 0.5rem;

  /* Maintain consistent padding and gap for even spacing */
  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 container height equal to viewport area using box-sizing property */
  height: 100vh;
}

.container > div {
  background-color: #d9d9d9;

  /* Display child elements as grids to easily center content */
  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 {
    /* Transition 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>

Answer 2

To achieve a full screen height container, utilize height: 100vh and ensure the body margin is set to 0 for the container to occupy the entire screen. Utilize fr units for grid rows and columns to fill the container effectively. Avoid specifying the height or width on grid children as they will automatically adjust within the allocated space. For a comprehensive guide on grid layouts, refer to Kevin Powell's instructional video here.

For responsiveness, implement a media query to switch from a 4 column, 3 row layout to a 3 column, 4 row layout. The use of grid-template-areas for this transition is recommended for optimal responsiveness. Best of luck!

* {
  box-sizing: border-box; /* Important to prevent borders affecting defined widths and heights */
}

body {
  margin: 0; /* Ensures content reaches screen edges */
}

.container {
  /* Add border around container as shown in the example */
  border: 3px solid #9a9a9a;
  border-radius: 0.5rem;

  /* Maintain consistent padding and gap for even spacing */
  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 container height equal to viewport area using box-sizing property */
  height: 100vh;
}

.container > div {
  background-color: #d9d9d9;

  /* Display child elements as grids to easily center content */
  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 {
    /* Transition 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>

Answer 3

Answer №2

To ensure the box-sizing property is set correctly and adjust the width and height values of element .A to fit the grid layout, follow these guidelines:

<style>
    .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; 
        box-sizing: border-box; /* it's important to include this line */
    }
    
    .A {
        grid-area: A;
        width: calc(25% - 7px); /* subtract the gap from the width */
         height: calc(33.33% - 7px); /* subtract the gap from the height */
        background-color: yellow; /* this line highlights the grid cell */
    }

     .B { grid-area: B; }
    .C { grid-area: C; }
    .D { grid-area: D; }
    .E { grid-area: E; }
    .F { grid-area: F; }
</style>

Answer 4

To ensure the box-sizing property is set correctly and adjust the width and height values of element .A to fit the grid layout, follow these guidelines:

<style>
    .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; 
        box-sizing: border-box; /* it's important to include this line */
    }
    
    .A {
        grid-area: A;
        width: calc(25% - 7px); /* subtract the gap from the width */
         height: calc(33.33% - 7px); /* subtract the gap from the height */
        background-color: yellow; /* this line highlights the grid cell */
    }

     .B { grid-area: B; }
    .C { grid-area: C; }
    .D { grid-area: D; }
    .E { grid-area: E; }
    .F { grid-area: F; }
</style>

What is the best way to adjust the height and width to perfectly align with the edge of the screen?

Answer №1

Answer №2

Similar questions

How to effectively manage multiple stylesheet links in React Native Expo development

Showing child elements within a div using AngularJS

Tips to position two shortcode elements next to each other horizontally

Tips for customizing the back button in Ionic 3

Type of element returned

Various Mobile Devices Display Website in Unique Ways

Why am I only able to send form data using the GET method and not the POST method?

When using Vue with CSS3, placing an absolute positioned element within a relative wrapper can cause issues with maintaining the

Creating a dynamic dashed line animation using SVG

Struggling to animate the selector of a nested div in Jquery?

Can a small white pop-up be triggered by clicking a button?

The AJAX success function is operational, yet the file does not execute

What could be causing the malfunction of the Carousel Slide feature in my code?

What is the best way to apply styling to a kendo-grid-column?

What is the process for attaching a right ribbon label onto a card in Fomantic UI components?

Tips for displaying an HTML page using JavaScript

Can user authentication be achieved without relying on a database or PHP?

Unable to get CSS to function properly on website

Choosing identical elements within comparable sub-divisions

Is Consistency Possible with CSS Transition Direction?