Creating a Three by Three Grid with HTML and CSS

I have a total of 20 elements to display in a grid view. However, I specifically want a 3x3 grid view, where only 9 elements will be visible in the view window. The remaining elements should be placed on the right side of the window in a scrollable manner.

Irrespective of the screen size, I aim to showcase only the initial 9 elements in the grid.

.items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 5px;
}

.item {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  height: 4rem;
}
<div class="items">
  <div class="item">ONE</div>
  <div class="item">TWO</div>
  <div class="item">THREE</div>
  <div class="item">FOUR</div>
  <div class="item">FIVE</div>
  <div class="item">SIX</div>
  <div class="item">SEVEN</div>
  <div class="item">EIGHT</div>
  <div class="item">NINE</div>
  <div class="item">TEN</div>
  <div class="item">ELEVEN</div>
  <div class="item">TWELVE</div>
</div>

javascripthtmlcssreactjs

Answer №1

If you want the grid to flow vertically, you can achieve that by setting it up with some calculation:

.cards {
  /* define the number of columns on the first screen */
  --cols: 3;
  
  /* define the number of rows on the first screen */
  --rows: 3;
  
  /* set the grid gap */
  --gap: 5px;
  
  --width: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
  display: grid;
  position: relative;
  grid-auto-flow: column dense;
  grid-template-rows: repeat(var(--rows), 1fr);
  grid-auto-columns: var(--width);
  grid-gap: var(--gap);
  overflow-x: auto;
}

.card {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  height: 4rem;
}
<div class="cards">
  <div class="card">ONE</div>
  <div class="card">TWO</div>
  <div class="card">THREE</div>
  <div class="card">FOUR</div>
  <div class="card">FIVE</div>
  <div class="card">SIX</div>
  <div class="card">SEVEN</div>
  <div class="card">EIGHT</div>
  <div class="card">NINE</div>
  <div class="card">TEN</div>
  <div class="card">ELEVEN</div>
  <div class="card">TWELVE</div>
  <div class="card">THIRTEEN</div>
  <div class="card">FOURTEEN</div>
</div>

Answer №2

.cards {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.card {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="cards">
  <div class="card">ONE</div>
  <div class="card">TWO</div>
  <div class="card">THREE</div>  
  <div class="card">FOUR</div>
  <div class="card">FIVE</div>
  <div class="card">SIX</div>  
  <div class="card">SEVEN</div>
  <div class="card">EIGHT</div>
  <div class="card">NINE</div>  
</div>

Answer №3

If you want to display only the first 9 cards in a container while hiding the rest, you can utilize the CSS selector nth-child along with the card class. By using the formula :nth-child(n + 10), you can target the cards starting from the 10th position and onwards effectively.

To ensure that the cards are displayed in a 3 x 3 grid layout, you can update the grid-template-columns property with repeat(3, 1fr) in your CSS code snippet.

Here is the code snippet for achieving this layout:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}

.card {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  height: 4rem;
}

/* Hide card which occurs at 10th position and above */
.card:nth-child(n + 10) {
  display: none;
}
<div class="cards">
  <div class="card">ONE</div>
  <div class="card">TWO</div>
  <div class="card">THREE</div>
  <div class="card">FOUR</div>
  <div class="card">FIVE</div>
  <div class="card">SIX</div>
  <div class="card">SEVEN</div>
  <div class="card">EIGHT</div>
  <div class="card">NINE</div>
  <div class="card">TEN</div>
  <div class="card">ELEVEN</div>
  <div class="card">TWELVE</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using codeigniter and JQuery, I have developed a unique Javascript function to selectively extract a specific portion of text

I'm currently working with the following syntax: $("#orderbynumber").autocomplete( { source: "get_orders_by_order_number", messages: { noResults: '', results: function() {} }, select: function( event, ui ) { var select ...

javascriptjquerycodeigniter

Mastering the Art of Manipulating Z-Index Stacking Context in CSS Using Transforms

I'm struggling to position the red square on top of the table. After reading articles about Z-index Stacking Context and browsing through this stack overflow page about overriding CSS Z-Index Stacking Context, I still can't seem to figure it out. ...

htmlcss

Tips for testing components with React JS using jest and enzyme

Attempting to perform a unit test on the code snippet below: handleChange = (e) => { let localState = Object.assign({}, this.state) localState[e.target.name] = e.target.value this.setState(localState) this.props.addMetaInformation(localState) } } I&a ...

javascriptreactjsunit-testing

Issue arising during the connection between Node.js and MySQL, which is linked to MongoDB using JWT authentication

Encountering an issue while connecting Node.js with MySQL, where it is already connected with MongoDB using JWT authentication. I am currently utilizing Node.js MongoDB JWT redux-based authentication but transitioning to a MySQL database has resulted in an ...

mysqlnode.jsreactjsmongodbjwt

Data is not appearing as expected in the React component when using the data

I'm currently facing an issue while working with MUI. I am able to retrieve the list in console.log, but nothing is being displayed on the screen - no errors or data, just the console.log output. Here is a snippet of the data that I am receiving: ...

javascriptarraysreactjsmaterial-ui

Managing AJAX Errors in PHPAJAX error handling tips for developers

My current code is only set up to display a general error message when an error occurs during execution. I want to improve it by returning specific error messages for different scenarios. However, I have not been able to find satisfactory solutions in my s ...

javascriptphpjqueryjsonajax

Styling a half circle in React Native

Despite my efforts, I have not been able to find anything quite like this: example Could anyone provide guidance on implementing this with react? ...

cssreactjsreact-native

Is there a way to automatically import all images from a folder in VUE?

I'm attempting to automatically import all images from a folder. Here is what I've tried under // tested: <template> <p>classical art</p> <img v-for="image in images" :key="image" :src="image.url& ...

javascriptvue.jsvue-cli

Is there a way to automatically load data whenever a specific inner div on an HTML page is modified?

On my website, I have created a main page with three divs: header, footer, and main. The header div contains buttons that change the content of the main div when clicked. Rather than reloading the entire page, only the main div is updated with a new HTML p ...

htmljqueryjquery-plugins

adjusting the width of an HTML table cell

I'm struggling with the code below: <table> <thead> <th class='1'>Date</th> <th class='2'>Start Time</th> <th class='3'>End Time </th> <th class='4 ...

htmlcss

Issues encountered when updating MySql Database from WordPress with Error 500, whereas the code functions properly when used outside of WordPress environment

Question: How can I update a MySQL database from within a JavaScript function on a WordPress WooCommerce page using Ajax? I have a working code snippet for updating the database, but when I integrate it into my WordPress page, I encounter a 500 error. To ...

javascriptphpmysqlajaxwordpress

What are the best practices for securely using JSON.stringify in JavaScript?

When I use JSON.stringify on a string that includes <script> tags, the script tags somehow escape and show up in the body of my document, causing unexpected results with the "injected" data. I'm puzzled by how they manage to escape, considering ...

javascriptjson

The jQuery application adds new HTML elements to the page and then reveals the code that follows

When making an Ajax call and rendering two templates based on the response, I encountered a problem where the correct template renders but the script following it appears on the page as plain text. Here's the code snippet with the issue: if (question ...

javascriptjqueryajax

Use AJAX request to download file and handle errors in case the file is not found or cannot be downloaded

Trying to implement an ajax request for downloading a file. Here's the code snippet: const downloadFile = (element) => { $.ajax({ url: element.id, type: 'GET', success: (result) => { window.lo ...

javascriptajaxdownload

Encountering a promise error when using TypeScript and React Lazy

I've been working with React and TypeScript, incorporating a higher order component to verify user authentication. However, after implementing the hoc, I encountered an error in my routes: /home/nidhin/Documents/Nidhinbackup/F/iot-remsys-demotwo/rem ...

reactjstypescriptreact-routerhigher-order-components

Encountering a Typings Install Error When Setting Up angular2-localstorage in WebStorm

I am currently using Windows and WebStorm as my development environment. I attempted to install the angular2-localstorage package by running the command npm install angular2-localstorage, but encountered an error. After realizing that the angular2-localst ...

javascriptangularwebstormnpm-install

Changing the color of a selected list element using an Angular directive

I'm currently facing an issue with my directive that is supposed to turn a list element red when clicked. It works fine, but I also want it to revert back to black when another list item is selected, so only one item stays in red color. Here is how I ...

javascriptangulartypescript

What is causing the issue with Next.js Json.map function not functioning correctly?

I am looking to develop a basic component that sources its data from a JSON list. While I am able to see the output of console.log(dat.CardId) on the website, it only works for console.log(). I cannot view the cards rendered by the .map function. The sty ...

javascriptreactjsnext.js

The 'userEvent.type' function in React Testing Library is failing to update the input value in a Material UI TextField component that has

I am currently facing an issue with a material UI TextField element that is meant to track the latitude value. The requirement is for the latitude to fall within the range of -90 to 90 degrees. I have implemented a unit test as a validation measure, howeve ...

javascriptreactjsjestjsmaterial-uireact-testing-library

Obtain the script's event feedback from the WebView and transfer it to React Native

My HTML script is used to display a module, but I encountered an issue with the eventHandler not responding. How can I ensure that the eventHandler in Web View triggers responses? I am not receiving any logs for the onSuccess, onError, or onClose methods w ...

htmlreactjsreact-nativewebview