Design a dynamic tile grid layout using CSS Grid that adapts to different

I've recently started exploring the world of CSS Grid and I'm interested in creating a responsive tile-like layout using it. I found an example that I really like here:

Do you think using CSS Grid is a good approach for achieving this type of layout? Here's the markup I've been playing around with:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 50%;
  grid-template-columns: 50% 50%;

  a {
    border: 1px solid blue;
  }
}
<div class="grid">
  <a href="" class="grid-lg">
    Large item here
  </a>

  <div class="grid-sm-container">
    <a class="grid-sm">
      Smaller item here
    </a>
    <a class="grid-sm">
      Smaller item here
    </a>
    <a class="grid-sm">
      Smaller item here
    </a>
    <a class="grid-sm">
      Smaller item here
    </a>
  </div>
</div>

htmlcssresponsive-designcss-grid

Answer №1

If you're looking to create a responsive grid layout, consider using the following CSS code:

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

.grid-item {
  background-color: #ddd;
  padding: 10px;
  text-align: center;
}

/* Define styles for different screen sizes */
@media screen and (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media screen and (max-width: 480px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}
<div class="grid-container">
  <div class="grid-item">Tile 1</div>
  <div class="grid-item">Tile 2</div>
  <div class="grid-item">Tile 3</div>
  <!-- Add more grid items as needed -->
</div>

Feel free to customize the pixel values to better fit your design requirements

Answer №2

If you need help with CSS grid, you can check out this helpful tutorial from w3schools.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  /* background-color: Tomato; */
  padding: 10px;
}

.grid-container > div {
  background-color: dodgerblue;
  color: white;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}
<div class="grid-container">
  <div class="item1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</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

Collapse or expand nested rows within a dynamic table using Bootstrap Collapse feature

I am currently working on creating a dynamic leaderboard table for a sports league using data from a SQL database. The league consists of multiple teams, each team has different players (with some players belonging to more than one team), and players earn ...

javascripthtmljquerycssbootstrap-4

Remove the image by clicking on the "X" icon located on the top right corner of the image

One of my tasks involves deleting an image by clicking on the "X" mark located at the top right corner of the image. To achieve this, I referred to this CSS fiddle http://jsfiddle.net/yHNEv/. Sample HTML code: <div class="img-wrap"> <span ng-c ...

javascripthtmlcssangularjs

Receive a notification when the div element stops scrolling

I am attempting to replicate Android's expandable toolbar within an Angular component. My HTML code appears as follows: <div (scroll)="someScroll($event)"> <div class="toolbar"></div> <div class="body"></div> </d ...

javascripthtmlangularevents

Tips for effectively overriding default CSS in JavaFX 8 for TableView

I've been trying to customize the appearance of specific columns in a tableview using JavaFX. My goal is to make editable values display with a light yellow background to indicate that they can be edited. However, when I apply the following CSS to th ...

csstableviewjavafx-8

Is it feasible to utilize Socket.io and Express in conjunction with templates without the need for routes?

Apologies for what might be considered a beginner question, but I'm curious if it's possible to run a Socket.io event server in one folder and have an HTML page utilize that server from a different folder. The reason for this question is because ...

htmlnode.jsexpresssocket.io

Uncovering the media:thumbnail in an RSS feed using Scrapy's CSS selector

I am currently working on parsing an RSS feed that includes image URLs. The XML file structure is as follows: <item> <title>Item Title Goes Here</title> <link>https://www.google.com</link> <media:thumbnail url="https:/ ...

pythoncssscrapy

What is the best way to create a dropdown menu within an iframe that appears on top of all other frames?

The code snippet below is from my frameset.jsp file: </head> <iframe width="100%" src="mail_frame.html"></iframe> <iframe width="105px" height="100%" src="sidenav.html" id="leftnav" name="leftnav" ></iframe> ...

htmlcss

Using PHP to create multi-dimensional arrays and display them in a HTML table

Need help with this issue: Here is the array I'm working with: $tabel3 = array ( array ( "progdas" => "Java", "sks" => "3", "prior" => "2" ), array ( "progdas" => "C#", "sks" => "6", "prior" => "1" ), array ( "mat" => "Dasar", ...

phphtmlarrayshtml-table

What's the best way to target an element that is outside a certain parent container, but based on the parent's class?

Looking to target specific divs with a data-role of content that are not nested within a data-role="page" div with the class "modal". Advanced CSS selectors are not my forte. <div> <div data-role="page"> <div data-role="content" ...

csscss-selectors

A few of the input fields I filled out are not getting sent to the PHP script

Currently, I am working on a school project that involves creating a website similar to IMDB. My task is to include comments in our database, but I am facing an issue where two fields (fid and spoiler) are not getting posted to the PHP script handling the ...

phphtmlpost

Saving a picture to local storage with the file input type in ReactJS

I am attempting to save an image in the browser storage once a user selects an image from their computer. <div className="add_grp_image_div margin_bottom"> <img src={img_upload} className="add_grp_image"/> <input type="file" class ...

javascripthtmlcssreactjs

Modify the background color of the <li> element without using JavaScript after 3 seconds

Is it possible to change the background color of a <li> element without using javascript or JQuery, only with CSS? I've seen incredible things done with CSS alone and believe this is achievable. My <li> element functions as a horizontal m ...

htmlcss

Interact with jQuery to trigger events upon clicking on a list item, excluding checkboxes within the list

I'm in the process of developing a straightforward web application. I have a dynamically generated list on one section: Subsequently, I set up an event that triggers when any element within the list is clicked: $(document).on('click', &apo ...

javascriptjqueryhtmlcheckbox

The battle between nested flexbox heights and max-heights

Note: I am observing some unusual behavior on Chrome 72. FireFox 64 seems to be working fine! I am experiencing an issue with a nested flexbox. In the code snippet below, I have added an artificial XL height to .root.container in order to achieve the des ...

htmlcssgoogle-chromefirefoxflexbox

Tips for positioning the border properly within a scrollable table

My table has a sticky header with a fixed height, and in order to see more rows in the table, we have to scroll through them. The table design includes borders. The problem arises when there are more rows, as the border moves with the scroll. Initially, ...

csstypescripthtml-tablematerial-uiborder

Implementing the CSS link tag in the header of a NextJS 13 application for enhanced styling

In my Next 13 application, I'm looking to link directly to a basic CSS file. Unfortunately, adding it to the Head component hasn't yielded any results for me. I've also attempted to create a custom _document within both the app and pages, bu ...

cssnext.jsnext.js13

Struggling to adjust the width of a DIV based on browser size and content with CSS

I'm working with a div that contains several 210x210 pixel images, and I want to adjust its margin from the left side. The goal is for the right side of the div to be just a few pixels away from the images, which will have their own margin set. Strang ...

htmlcss

Issue with Jenkins displaying parameter values

Objective: Establish a conditional string parameter that spans multiple lines Method: I have set up two different jenkins parameters. Active choices parameter https://i.sstatic.net/PdWND.png Active choices reactive refer ...

htmljenkinsgroovyjenkins-pipelinejenkins-groovy

Strange outcomes observed with CSS Selector nth-child

When utilizing the CSS nth-child selector, I am encountering some peculiar issues. The HTML structure is as follows: <div class="block feature-callout-c" id="overview"> <div class="row"> <div class="span twelve"> ...

htmlcsscss-selectors

Props and theme merge to create uniquely designed styled components with a thematic twist

Out of sheer curiosity, I've been incorporating styled-components into my React application. Within this framework, I make use of the recommended theme to ensure consistency in colors and sizes throughout. Currently, my approach looks something like ...

cssreactjssassstyled-componentsemotion