Creating a grid table with dimensions 4x3, where two specific items will occupy 50% of the height

I am working on creating a grid table with two items having a height of 50% each.

Here is the current structure of my HTML and Sass code:

<div class="grid">
   <div class="grid__list">
          <div class="grid__item">1</div>
          <div class="grid__item">2</div>
          <div class="grid__item">3</div>
          <div class="grid__item">4</div> 
          <div class="grid__item">5</div>
          <div class="grid__item">6</div>
</div>
</div>

.grid
    &__list
        display: grid
        grid-template-columns: repeat(3, 1fr)
        grid-template-rows: repeat(3, 1fr)
        grid-column-gap: 20px
        grid-row-gap: 20px
        min-height: 1000px
    &__item
        border-radius: 5px
        background: blue
        &:nth-child(1)
            grid-area: 1 / 1 / 4 / 2
        &:nth-child(2)
            grid-area: 1 / 3 / 2 / 4
        &:nth-child(3)
            grid-area: 2 / 3 / 3 / 4
        &:nth-child(4)
            grid-area: 3 / 3 / 4 / 4
        &:nth-child(5)
            grid-area: 1 / 2 / 3 / 3
        &:nth-child(6)
            grid-area: 3 / 2 / 4 / 3
htmlcsssasscss-grid

Answer №1

You should utilize a grid system with six rows instead of three.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.grid__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  height: 100vh;
  grid-auto-flow: column;
  padding: .5em;
}

.grid__item {
  background: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: white;
  grid-row: span 2;
}

.grid__item:nth-child(1) {
  grid-row: span 6
}

.grid__item:nth-child(2),
.grid__item:nth-child(3) {
  grid-row: span 3
}
<div class="grid__list">
  <div class="grid__item">1</div>
  <div class="grid__item">2</div>
  <div class="grid__item">3</div>
  <div class="grid__item">4</div>
  <div class="grid__item">5</div>
  <div class="grid__item">6</div>
</div>

Answer №2

give this a try, it's been effective for me.

.grid__item {
  border-radius: 5px;
  background: blue;
  &:nth-child(1) {
    grid-column: 1;
    grid-row: 1/4;
  }

  &:nth-child(2) {
    grid-column: 2;
    grid-row: 1/3;
  }

  &:nth-child(3) {
    grid-column: 2;
    grid-row: 3;
  }      
}

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

Retrieve HTML elements from a string using PHP

Possible Matches: crawling a html page using php? Best methods to parse HTML I am trying to extract DOM elements from a string variable in my PHP script that contains an HTML page. How can I achieve this? For instance, if the string is something ...

phphtmlstringdomdocument

The children's className attribute can impact the parent element

As I work on creating a card object, I envision it with the className .card that is styled in CSS as follows: .card img{position:absolute; width:150px; height:160px} I want only the images inside my div to overlap each other while not affecting the divs ...

javascripthtmlcss

Is there a way for me to upload a csv file along with a password_hash

I have successfully implemented this code on my website, allowing me to upload CSV files to my database. However, I am looking to enhance the security measures by changing $item2 from a numerical password to a password_hash. ($data[1] currently represent ...

phphtml

Is it possible to customize the borders of boxes in Google Charts Treemap?

Although this may seem like a minor issue, I can't find any information in the documentation. I'm currently using Google Charts treemap for monitoring a specific project. The problem I'm facing is that when all the parent level rectangles ar ...

cssgoogle-visualizationtreemap

Do we always need to use eval() when parsing JSON objects?

<!DOCTYPE html> <html> <body> <h2>Creating a JSON Object in JavaScript</h2> <p> Name: <span id="jname"></span><br /> Evaluated Name: <span id="evalname"></span><br /> <p> <s ...

javascripthtmljsoneval

Using an Ember color picker to dynamically change SCSS variables

Is there a way to allow an admin to change the skin of one of my websites by selecting a color from a palette that will update a universal SASS variable? I am aware of methods to dynamically change CSS using jQuery, but I specifically want to modify the S ...

javascriptjqueryhtmlcssember.js

Steps to apply styles to an iframe element directly from its inner HTML code

Looking for help with this line of code: <iframe src="http://www.google.com" name="google" style="Z-INDEX: 0; MARGIN-TOP: -1px; WIDTH: 100%; HEIGHT: 1070px"> <html> <head></head> <body> < ...

htmlcssiframe

Adjusting the sidebar's position in alignment with the left content dynamically

I have a CSS setup to showcase image content on the left with a sidebar on the right. The size and orientation of the image can vary, so I want the details sidebar to be relatively positioned next to the image. Here is a snapshot: The CSS code looks like ...

css

Mixing together an array of colors, experimenting with adding a touch of transparency

Here is my first question, diving right in. I recently created a canvas in HTML and followed a tutorial to generate random floating circles that interact with the mouse position......if you want to check it out, click here. The issue I'm facing now ...

javascripthtmlcssarrays

Instructions for making a vertical line using HTML

Currently, I am working on a design for a card that is similar to this one. What I'm trying to figure out is how to add a vertical line right underneath the circle just like in the image. ...

htmlcssbootstrap-4

Angular 10: Oops! An issue occurred stating that the mat-form-field needs to have a MatFormFieldControl inside

When attempting to set up a form group on a page, I encountered the following error: ERROR Error: No value accessor for form control with name: 'modalidade' at _throwError (forms.js:2431) at setUpControl (forms.js:2339) at FormGroupDirective.addC ...

htmlangulartypescript

Rendering HTML5 and CSS3 on Internet Explorer 8

My coding knowledge is limited, but I am conducting research for our front-end developers. Our goal is to revamp our portal application using CSS 3 and HTML 5 in order to achieve an adaptive layout that can accommodate different browser widths. The curre ...

htmlcssbrowserinternet-explorer-8version

How to Conceal the <th> Tag with JavaScript

I attempted to conceal certain table elements using JavaScript. For <td> elements, it works fine: function hide(){ var x=document.getElementsByTagName('td'); for(var i in x){ x[i].style.visibility='hidden'; ...

javascripthtml

Creating a dropdown menu that functions for 24 hours non-stop by utilizing the Array.from( Array(n) )

Struggling to make my code less dense, I'm looking for the best way to implement a dropdown menu that allows users to choose between options 1-24 while the array is nested within an object. Thoughts? I'm working on a chrome extension that genera ...

javascripthtmlarraysloopsgoogle-chrome-extension

Using JavaScript, what is the method for inputting values into a window.prompt()?

I've been working on a project that involves scraping basic HTML pages from an internal server at my workplace. When I visit these pages, a popup window similar to a windows.prompt() appears, asking for a username and password with the message "Enter ...

javascriptpythonhtml

Designing a div that fills the entire height and 75% of the body's width

As a newbie to HTML/CSS, I'm struggling with implementing what I described in the title. It was functioning properly earlier, but now it seems like I made a mistake somewhere and it's no longer working. My code is quite lengthy, but the remainin ...

htmlcss

There appears to be a problem with the jquery ListView

Hello, I'm facing an issue while trying to dynamically display content using jQuery. Here is my HTML setup: <ul data-role="listview" data-inset="true" id="two"> Below is the script file: $(document).ready(function(){ var i=0; while(i<10){ ...

jqueryhtmllistview

Ways to eliminate the vertical scroll feature in a kendo chart

I am encountering an issue while loading a kendo chart inside grid-stack.js where I am unable to resize the height properly. Whenever I decrease the height, a vertical scroll appears which should not happen. I have tried setting the height to auto and refr ...

javascriptjquerycsskendo-chartgridstack

Determining the height of a Bootstrap column in relation to another element

Utilizing the grid layout from bootstrap, I have the following structure: <div id="prof_cont_enclose"> <div class="row"> <div class="prof_cont_row"> <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2 prof_elem"&g ...

javascriptjqueryhtmlcsstwitter-bootstrap

What's the difference in width between Inline-Block and Float?

HTML <ul> <li><a href="#">Item #1</a></li> <li><a href="#">Item #2</a></li> <li><a href="#">Item #3</a></li> <li><a href="#">Item #4</a></li> & ...

csscss-float