Utilize display grid to showcase just three columns on the screen

Question

Utilize display grid to showcase just three columns on the screen

I am looking to only display 3 columns on my webpage and hide the rest of the content. I believe that adjusting the height of the container dynamically to fit just 3 columns may be the solution, but I am unsure how to achieve this or whether it is the correct approach. Any guidance on this matter would be greatly appreciated 🙏

Currently, I am utilizing scss for styling, however, I am open to examples in css as well.

.contentContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 5px;
  place-items: center;

  height: 330px; // I speculate this might need to be adjusted dynamically

  overflow: hidden;
  
  .imageContainer {
    width: 100%;
    height: 100%;
    
    img {
      width: 100%;
      height: 100%;
      aspect-ratio: 1/1;
      border-radius: 5px;
    }
  }
}

Edit: I have no issues incorporating JavaScript if needed.

css sass

Answer 1

Answer №1

Facing the XY Dilemma!

The challenge does not lie within the grid itself. To achieve the task of hiding all elements except for the first 3, utilize the :not(:nth-child(-n+3)) selector to conceal all elements inside the grid except for the initial 3:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.container > div:not(:nth-child(-n+3)) {
  display: none;
}


/* for visualization purpose only */
.container > div {
  border: 2px dashed red;
  min-height: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Answer 2

Facing the XY Dilemma!

The challenge does not lie within the grid itself. To achieve the task of hiding all elements except for the first 3, utilize the :not(:nth-child(-n+3)) selector to conceal all elements inside the grid except for the initial 3:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.container > div:not(:nth-child(-n+3)) {
  display: none;
}


/* for visualization purpose only */
.container > div {
  border: 2px dashed red;
  min-height: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Utilize display grid to showcase just three columns on the screen

Answer №1

Similar questions

Ensure you have the right zoom in and out percentages to properly test how your website responds on various browsers across different

Easiest method to globally disable form autocompletion in an application without manually setting autocomplete off for every individual form

What is the best way to space out words in a navigation bar?

Switching Column Content with jQuery on Mobile Devices

The height property in the CSS is causing the parent element to break and cannot be confined

Support for numeric font weights in web browsers

Step by step guide on incorporating two background images in a single header

Get rid of the "clear field" X button for IE11 on Windows 8

Is there a glitch or a misinterpretation of the specifications concerning the use of relative padding

Arranging media elements in Bootstrap to interchange text with an image

"Upon clicking, toggle the addition or removal of the overflow hidden

How can I create spacing between squares in an HTML div element?

Instructions on adjusting the height of a flexbox container to utilize the available space

The swiper slider loop malfunctions when the number of slides is less than the double-value

Setting line height as a pixel value does not yield the desired result

Ways to troubleshoot an unusual margin issue in a static column of an HTML table

Place the background image of the parent element relative to the child element

Blue outlined React Select dropdown with search functionality

Create a div in HTML with a customized style to resemble a label with rounded edges

Choosing between JavaScript and Handlebars.js depends on the specific needs