Question 45295 in Html Question posted in
Some basic documentation can be found here.

How to make grid elements take up exactly 1/2 of the screen? – Html

I am trying to make a website that utilizes grid elements to show the reader information about the different items (in my case I am doing them about planets). I, not well versed in CSS, am puzzled about how to make them take up an exact percentage of the screen. When I make the elements scale to screen, it makes the columns very very small.

/* Apply styles to the grid container */

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
  padding: 20px;
}


/* Apply styles to the grid items */

.grid-item {
  background-color: #7a6767;
  border: 1px solid #5e4e4e;
  padding: 20px;
}
<div id="saturn" class="grid-item">
  <h1>Saturn Description!</h1>
  <h2>SATURN!</h2>
</div>
<div id="uranus" class="grid-item">
  <h1>Uranus Description!</h1>
  <h2>URANUS!</h2>
</div>
<div id="neptune" class="grid-item">
  <h1>Neptune Description!</h1>
  <h2>NEPTUNE!</h2>
</div>
Tags:

2

Answers


  1. 0

    You can add width: 50%; on your grid-item class and then it should ocupate exactly 1/2 of the screen. If you want to get rid of the gap between edge of the screen and your elements, you need to add margin: 0; property on your body element.

    Login or Signup to reply.
  2. 0

    As mentioned above, add the property width: 50% so that it occupies half of the screen and automatically adjusts to the screen size, and if you want it to be centered you can use a margin: 0 auto; applied to the parent div.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search