What is the best way to create a grid layout that is responsive using HTML and CSS

I have been searching all over the internet and have not been able to find a grid layout like this.

The "grid-template-columns" property is not achieving what I need, as I cannot make one box larger than the others. I am looking to create 4 equal boxes and 1 box that has equal height and width, forming a square box that is twice the size of the grid gap.

Attached is an image I created to help illustrate what I am trying to achieve.

I also attempted to use display: flex, but I am not fully grasping how it works. Any assistance would be greatly appreciated. Thank you!

View my conceptual illustration

htmlcsscss-grid

Answer №1

The solution for creating a responsive grid layout in HTML and CSS is provided below:

.container {
  display: grid;
  justify-content: center;
}

.item {
  border: 2px solid #000;
  width: 128px;
  min-height: 128px;
  justify-content: center;
  margin: 10px;
  display: grid;
  align-items: center;
}

.item5 {
  grid-column: 2/5;
  max-width: 280px;
  width: 100%;
}

@media (max-width: 600px) {
  .item5 {
    grid-column: 2/1;
  }
}
<div class="container">
  <div class="item1 item">128x128</div>
  <div class="item2 item">128x128</div>
  <div class="item3 item">128x128</div>
  <div class="item4 item">128x128</div>
  <div class="item5 item">280x128</div>
</div>

Answer №2

Just as shown in the image 

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 180px;
}
.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.box {
  width: 10vw;
  height: 10vw;
  margin: 12px;
  border: 1px solid black;
}
.box.big {
  width: calc(20vw + 24px);
}
<div class="container">
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="row">
    <div class="box big"></div>
  </div>
</div>

Fields 1-5 vertically aligned in the middle at the current width 

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vw;
}
.box {
  width: 10vw;
  height: 10vw;
  margin: 12px;
  border: 1px solid black;
}
.box.big {
  width: calc(20vw + 24px);
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box big"></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

Traverse through JSON data using jQuery

Currently, I have a JSON response that I am uncertain how to effectively iterate through and utilize. { "ID": 1, "Name": "dept1", "Categories": [ { "ID": 1, "Name": "catg1" }, { "ID": 2, "Name": "catg2" } ] ...

jqueryjsonhtmlloops

Attempting to modify the background hue of a grid component when a click event is triggered

I am struggling with the syntax to change the color of an element in my grid when clicked. I have attempted different variations without success. Being new to JavaScript, I would appreciate some gentle guidance if the solution is obvious. JS const gri ...

javascripthtmlcss

Steps for developing a floating image transition using CSS and React

Looking to achieve a floating image transition using CSS and React, similar to the Divi theme header images. Check out the example below: enter image description here For more information, visit: ...

cssreactjs

Avoiding Duplicate Paths in URLs with Perl CatalystOne common issue that can occur in web development is the presence of double

I recently developed a web application using Catalyst framework. The login page can be accessed by typing the URL: http://mydomainname/login When accessing this URL, the login page is displayed beautifully with all its styling from the CSS file. However ...

htmlcssperlmodel-view-controllercatalyst

Interested in creating a weather application that changes color based on the time of day

My attempt to create a weather app with a glowing effect has hit a roadblock. I want the app to glow "yellow" between 6 and 16 hours, and "purple" outside of those hours. I have assigned classes for AM and PM elements in HTML, and styled them accordingly i ...

javascripthtmlcssbootstrap-4

The confirm() function shows up before the background on a blank layout

I'm facing an issue where whenever my confirm() function pops up, the alert box displays correctly but then the background turns blank. I've tried various solutions like moving the entire if statement to the bottom of the page or at the end of th ...

javascriptphphtmlcss

Sort choices based on the optgroup category label text

I want to create a system where the user can select a game from one dropdown menu and then see only the consoles that game is available on in another dropdown menu. For example, if the user selects a game like Forza Horizon which is available on multiple c ...

javascriptjqueryhtmlfilterhtml-select

Is there an issue with the functioning of Angular routing?

I've been working on setting up routing in AngularJS and it seems like the server is running smoothly. However, I'm facing an issue with the angular routing not functioning correctly; only the main.html page loads in ng-view, while second.html do ...

javascripthtmlangularjs

execute the function whenever the variable undergoes a change

<script> function updateVariable(value){ document.getElementById("demo").innerHTML=value; } </script> Script to update variable on click <?php $numbers=array(0,1,2,3,4,5); $count=sizeof($numbers); echo'<div class="navbox"> ...

phpjavascripthtmlcss

Using jQuery to change the `class` of the parent `div` based on the length of a `p`

I am attempting to adjust the height of a parent div based on the length of text in its child p.descr. This is achieved by adding a specific class that corresponds to different height values in CSS. Below is the jQuery code snippet: $(document).ready(fu ...

jqueryhtmlcss

CSS3 blending modes

I am attempting to create a design similar to this letter on an image using blending modes. Check out my code example <div id="box"> <div id="image"> <img src="https://www.epicurrence.com/images/speakers/julie.jpg" /> </div&g ...

cssblending

What steps should I take to ensure my clock stays in sync with my runTime function?

I am developing a mini digital clock project with the ability to mimic a physical clock. The clock is activated by using a power button to switch it on and display the current time. It should also be able to turn off and show an empty screen. However, th ...

javascripthtmlalgorithmweb-applications

Tips for resizing the width automatically within a container?

I am facing an issue with a container that contains 3 DIVS: left sidebar, main content, and a right sidebar. I have made the main content responsive by setting the width to width:calc(100% - 400px); (where 400px is the combined width of the sidebars). Howe ...

htmlcss

Stop the duplication of the HTML content to ensure only one copy is saved

Recently, I have been coding a feature that saves the HTML of the currently displayed page to another file upon pressing a button. However, I encountered an issue where if the button is pressed multiple times quickly, the saved file contains incorrect HTML ...

javascriptphpjqueryhtmlajax

The form data is being passed as null to HttpContext.Current.Request

My file upload module is working well with Postman without any content type. However, in the code, the file count always shows as 0 in the backend API. If anyone has any insights into what I might be doing wrong, please help me out. Thank you. Below is my ...

javascripthtmlangularjsasp.net-web-api

Reposition the span element to the right of the div tag

I need help adjusting the positioning of the elements in this HTML code. How can I move the span element with the image to the right of the div tag? Here is the code snippet: <div style='width:600px;padding-top: 2px;padding-bottom: 1px'& ...

javascriptcsshtmlwebix

Tips for extracting and utilizing the values of multiple checked checkboxes in a jQuery datatable

When a button is clicked, I am trying to retrieve the selected values of multiple rows from the datatables. However, with my current code below, I am only able to get the value of the first selected row. function AssignVendor() { var table = $(assig ...

javascriptjqueryhtmlcheckboxdatatables

Imitate the act of pasting content into a Textarea using JavaScript

When data is copied from the clipboard and pasted into an html textarea, there is some interesting parsing that occurs to maintain the formatting, especially with newlines. For instance, suppose I have the following code on a page that I copy (highlightin ...

javascripthtml

how to target the last child element using CSS commands

<a><div class="myDiv"></div></a> <a><div class="myDiv"></div></a> <a><div class="myDiv"></div></a> <a><div class="myDiv"></div></a> // This specific one is what ...

htmlcss

Obtaining visuals in a specific manner

I have a customized slider (flexslider) with 10 images per slide. The images are currently manually inserted, but I want to optimize the slider to dynamically extract images using PHP. However, my current setup only displays one image per slide. How can I ...

phphtmlcss