css Question posted in
Some basic documentation can be found here.

CSS Automatic Grid Items Height

With following HTML

    <body>
        <div class="wrapper">
            <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
            <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
            <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
            <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
            <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
            <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
            <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
            <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
            <div class="grid-item"><img src="https://images.unsplash.com/photo-1713877561507-881bf3b1c310?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
        </div>
    </body>

And CSS

.wrapper {
    width: 90%;
    margin: 200px auto;
    border:solid 3px palegreen;
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}


.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

How does .grid-items know what height to take ?

I thought .grid-items just won’t take any height since I didn’t specify it but now i am confused

Tags:

2

Answers


  1. 0

    By default the css grid layouts takes the height of the things that are inside it, in your paradigm it contains images so it will take the height of the images.

    To be more precise The css rule .grid-item img { height: 100%; } tells the images to take up 100% of the height of their parent grid items, which ensures that the images fill the entire space within each grid item without distortion.

    Furthermore answering your second question in the comments on why Original photo has resolution of 6000×4000 pixels while computed size of each .grid-item is 1633.19×1092.75 pixels. If computed size was 1633.19×4000. It depends on how browsers handle images with object-fit: cover;. This property ensures that the image covers the entire container while maintaining its aspect ratio so it has to do some correcting before rendering it to you like that, but, even without the css rule object-fit: cover I am not really sure how each browser reacts to resizing each image dynamically in order to keep the aspect ration, it’s out of the scope of my knowledge.

    I hope I helped you a little, if you need any more explanation please tell me.

    Login or Signup to reply.
  2. 0

    To achieve an automatic grid item height in CSS, you can use the grid-auto-rows property along with grid-template-columns for defining the grid structure.

    .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Define the columns with auto-fit and minmax */
  grid-auto-rows: auto; /* Set the height of grid items to auto */
  gap: 10px; /* Define the gap between grid items */
}

.grid-item {
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
}
    <div class="grid-container">
  <div class="grid-item">
    <h2>Item 1</h2>
  <p>Demo Importer: With the built-in demo importer you can easily import the content, theme settings, widgets and sliders from any of our live demos to get started quickly. When testing the demo importer we found that most demos will import in under 1 minute! This means when you are starting from scratch (empty WordPress site) you will be able to easily replicate any of our live demo sites very quickly so you can then tweak it for yourself or your client. When importing a demo you can select to import just the Sample Data (with or without the images from the live site), the Customizer settings, the widgets or the sliders or you can import everything.</p>
  </div>
  <div class="grid-item">
    <h2>Item 2</h2>
  <p>Demo Importer: With the built-in demo importer you can easily import the content, theme settings, widgets and sliders from any of our live demos to get started quickly. When testing the demo importer we found that most demos will import in under 1 minute! This means when you are starting from scratch (empty WordPress site) you will be able to easily replicate any of our live demo sites very quickly so you can then tweak it for yourself or your client. When importing a demo you can select to import just the Sample Data (with or without the images from the live site), the Customizer settings, the widgets or the sliders or you can import everything.</p>
  </div>
  <div class="grid-item">
    <h2>Item 3</h2>
  <p>Demo Importer: With the built-in demo importer you can easily import the content, theme settings, widgets and sliders from any of our live demos to get started quickly. When testing the demo importer we found that most demos will import in under 1 minute! This means when you are starting from scratch (empty WordPress site) you will be able to everything.</p>
  </div>
  <!-- Add more grid items as needed -->
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search