Ways to customize row widths in CSS

I am trying to create a grid with 4 rows and 3 columns, where the last 3 rows are half the size of the full grid and centered horizontally below the 1st row. I have attempted different methods to achieve this, including using a nested grid, but so far none of them have been successful.

.user-header {
  justify-content: center;
  align-self: center;
}

.user-header .grid-header {
  width: 46%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 15% 30% 30% 45%;
  grid-gap: .2rem;
  grid-auto-flow: row;
}

.grid-header-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-header-item:nth-child(10) {
  grid-column: 1 / span 3;
  grid-row: 4;
  width: 100%;
  display: block;
}
<div class="user-header">
  <div class="grid-header">
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey 
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
  </div>
</div>

https://i.sstatic.net/7jJXY.png

htmlcsscss-grid

Answer №1

Creating a layout in flex is quite simple.

HTML:

<div id=“user-header”>
     <div class=“header-item-long”>
      <div class=“header-text”>
       Hello
      </div>
      <div class=“header-text”>
       Hello
      </div>
      <div class=“header-text”>
       Hello
      </div>
     </div>
     <div class=“header-item-small”>
      <div class=“header-text”>
       Hello
      </div>
      <div class=“header-text”>
       Hello
      </div>
      <div class=“header-text”>
       Hello
      </div>
     </div>
     <div class=“header-item-small”>
      <div class=“header-text”>
       Hello
      </div>
      <div class=“header-text”>
       Hello
      </div>
      <div class=“header-text”>
       Hello
      </div>
     </div>
     <div class=“header-item-large”>
      <div class=“header-text”>
       Hi
      </div>
    </div>

CSS:

#user-header {
width: 100%;
height: your size;
display: flex;
flex-direction: column;
}

#user-header .header-item-long {
Width:100%;
Height: your size;
Display: flex;
Flex-direction: row;
Justify-content:center;
}

#user-header .header-item-small {
Width: 100%;
Height: your size;
Display: flex;
Flex-direction: row;
Justify-content: center;
Padding: 0 50px;
}

#user-header .header-item-large {
Width: 100;
Height: your size;
Display: flex;
Flex-direction: row;
Align-items: center;
Justify-content: center;
}

Answer №2

Utilizing grid layout may not be the most straightforward option in this scenario as aligning items in the center of the row can be challenging.

Consider using flexbox instead. Here is an example:

.grid-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 46%;
}

.grid-header-item:nth-child(-n + 3) {
  flex: 1 0 26%;
  margin-left: 5px;
}

.grid-header-item:nth-child(n + 4) {
  flex: 0 0 24%;
  margin-left: 5px;
}

.grid-header-item:last-child {
  flex-basis: calc(72% + 10px);
}

.grid-header-item {
  margin-bottom: 5px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
}

* {
  box-sizing: border-box;
}
<div class="user-header">
  <div class="grid-header">
    <div class="grid-header-item">Hey</div>
    <div class="grid-header-item">Hey</div>    
    <div class="grid-header-item">Hey</div>
    <div class="grid-header-item">Hey</div>
    <div class="grid-header-item">Hey</div>
    <div class="grid-header-item">Hey</div>
    <div class="grid-header-item">Hey</div>
    <div class="grid-header-item">Hey</div>
    <div class="grid-header-item">Hey</div>
    <div class="grid-header-item">Hey</div>    
  </div>
</div>

Answer №3

I find the flex solutions provided by other responders to be quite impressive. However, I wanted to showcase how similar results can also be achieved using grid. While it may not be considered the optimal or most versatile solution, it is worth noting that grid can be utilized for this purpose as well.

For further information on grid-template-areas, please visit this link.

.grid-header {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-auto-rows: 15% 30% 30% 45%;
  grid-template-areas:
    'r1c1 r1c1 r1c1 r1c1 r1c2 r1c2 r1c2 r1c2 r1c3 r1c3 r1c3 r1c3' 
    '. . . r2c1 r2c1 r2c2 r2c2 r2c3 r2c3 . . .'
    '. . . r3c1 r3c1 r3c2 r3c2 r3c3 r3c3 . . .'
    '. . . r4c1 r4c1 r4c1 r4c1 r4c1 r4c1 . . .';
  grid-gap: .2rem;
}

.grid-header-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: cyan;
}
.grid-header-item:nth-child(1) {grid-area: r1c1;}
.grid-header-item:nth-child(2) {grid-area: r1c2;}
.grid-header-item:nth-child(3) {grid-area: r1c3;}
.grid-header-item:nth-child(4) {grid-area: r2c1;}
.grid-header-item:nth-child(5) {grid-area: r2c2;}
.grid-header-item:nth-child(6) {grid-area: r2c3;}
.grid-header-item:nth-child(7) {grid-area: r3c1;}
.grid-header-item:nth-child(8) {grid-area: r3c2;}
.grid-header-item:nth-child(9) {grid-area: r3c3;}
.grid-header-item:nth-child(10) {grid-area: r4c1;}
<div class="user-header">
  <div class="grid-header">
    <div class="grid-header-item">
      Hey 
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey 
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
  </div>
</div>

Answer №4

In order to address this inquiry, I implemented Cris's suggestion of utilizing 12 columns in total. The initial row spanned across all 12 columns, whereas subsequent rows were divided into 6 columns each from the 4th to the 9th column.

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

Attempting to place numerous recurrent elements in a fixed position relative to the perspective of the observer

Describing the appearance of my button <a href="website" class="button">Link 1</a> Now, I need to place another set of 4 similar buttons in a horizontal row next to it. <a href="website" class="button">Link 2</a> <a href="webs ...

htmlcss

Troubleshooting a problem with the Ajax load function

I recently created a website with Joomla 3. There is a "contact" link located at the bottom right corner that triggers a contact form to load via ajax, utilizing the jquery load function. The problem Upon inspecting the console, I discovered this error: ...

jqueryhtmlajaxjoomla

Tips for designing a unique HTML form within the Wordpress Admin Panel

Is there a way to insert custom HTML into the WordPress Admin Panel? I want to incorporate a table within my Admin Panel, but I'm unsure of where to input the HTML code for it. Can someone provide guidance on this matter? ...

phphtmlwordpressplugins

Ways to delete a tag with jQuery

Currently I'm struggling with hiding elements like delpc and picnam. Here is the structure of my code: <ul id="userpic" class="user pic"> <im class="pict"/> Picture preview </ul> <div id="showpicname"> <div id= ...

jqueryhtml

Bootstrap columns are still disrupted by large images even when they have reached their maximum width and height

I have been using bootstrap templates that allow users to create displays with images and text. I previously added max-width:100% and height:auto to the img CSS, thinking it would resolve issues with large images breaking the container. However, when inse ...

htmlcssbootstrap-4

How to vertically align and center multiple divs with Flexbox programming

I have been grappling with the challenge of aligning two sets of rows vertically, each consisting of an image on one side and text on the other. While I usually use flex to achieve vertical alignment, it seems that a different approach is needed in this pa ...

reactjscssflexboxmaterial-ui

Press the "share" buttons for social media on the YouTube video embedded on my site

As I work on developing my website which features a list of YouTube videos, one of the key requirements is to include share buttons below each video for easy social media sharing. Despite trying different options, I haven't been able to figure out how ...

jqueryhtmlcssyoutube

Using jQuery to Retrieve an Element's Class Through an AJAX Call

For my website, I am using ajax to load pages by replacing the content in the main tag. The issue arises when working with Wordpress, as each page has its own set of body classes for styling purposes. My goal is to replace the old page's body classes ...

javascriptjqueryhtmlajaxwordpress

Creating a layout for Django comments and their accompanying replies in Django templates

I have successfully implemented a Comment model and views in my project. However, I am facing difficulty in organizing the templates to display replies corresponding to their respective comments. I would greatly appreciate it if you could guide me on how t ...

pythonhtmlcssdjango

Updating CSS for dropdown menu in Fluent/Fabric design

I am working with a dropdown component from Fluent UI and I am trying to customize the CSS of the dropdown options. Although I can add classes using className to the dropdown itself, I am facing difficulty in styling the dropdown options directly due to th ...

cssreactjsfluent-ui

Styling a div box

I've been experimenting with CSS on a div for a while now, but I'm still struggling to replicate the image below. If anyone can offer some guidance, it would be greatly appreciated. I'm looking for a solution involving a div or another elem ...

htmlcss

Exploring the depths of CSS table-cell and the impact of percentage-based

During my exploration of Github, I came across a fascinating menu display: If you pay attention, each item in the menu is assigned an equal width. In CSS, we typically give it a percentage value - but why? It's interesting to note that the parent div ...

htmlcsscss-tables

Notes on using touch devices with Angular

My goal is to make my Angular application capable of displaying a footnote on mobile devices when text injected with nativeElement.innerHTML is clicked. I attempted to explain this before but feel that I didn't do it justice, so here's another sh ...

javascriptjqueryhtmlangularionic3

The ReactJS code has been compiled without errors, but it is not displaying in the browser

After putting in a significant amount of effort, I successfully managed to install and configure ReactJS. Upon running the "npm start" command, the code was "COMPILED SUCCESSFULLY" and directed me to the web browser. However, there was no output visible; t ...

javascripthtmlnode.jsreactjs

Using HTML to create an email link with a subject that includes special characters such as '&'

Is it possible to dynamically set the email subject to include an '&' sign in client-side HTML? Here is the code I am working with: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="533d3c7e3c3d361320 ...

htmlemailspecial-charactersmailto

Centering Text and Image in React Horizontally

I'm attempting to achieve a layout similar to the one shown in the image below. Currently, my image is positioned at the top with the text below it. I would like to arrange it so that the text appears on the right side of the image. Please take a loo ...

cssreactjsmaterial-uiflexboxjss

How to position button text below GlyphIcon in Bootstrap 3

Is there a way to align text underneath the icon in Bootstrap 3 buttons with a GlyphIcon? <div class="btn-group"> <button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-file"></span>Archive</ ...

cssbuttontwitter-bootstrap-3glyphicons

Is there a way to modify the badge class color in Bootstrap 4 using CSS?

The badge class in Bootstrap v4.3.1 is defined as follows: .badge { display: inline-block; padding: 0.25em 0.4em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; ...

cssbootstrap-4

How can I avoid columns from breaking in Bootstrap?

<div id="mydiv" class="bg-danger row"> <div> <img src="https://www.discoservicemusicheria.com/shop/wp-content/uploads/2013/03/Michael-Jackson-Thriller-25th-Anniversary.jpg" class="rounded float-left" width="280" height="280"> ...

htmlcssbootstrap-4

A window interface in Javascript that allows for dynamic arrays and multiple choice answers

I've been working with multiple arrays and encountered a problem. Adding additional questions is not an issue when there's only one question div generated. However, if I add another question div, I can't add more questions to either of the w ...

javascripthtmlcss