CSS Grid Rows to have different widths

Question

I am having an issue with css grids. I am wondering if it is possible to have different widths for each of my grid rows.

My grid is set up as follows:

.section.section--3 .text {
    display: grid;
    justify-content: center;
    padding: 0 10% 0;
    text-align: center;
}

So I basically want my heading, paragraph and button nested inside my text div to have different widths without using max-width and not fill the entire row. Reason being my button should resize in width dynamically based on the length of the text inside.

my HTML is as follows:

<div class="text">
    <h2 class="text__item item--heading">
        Heading
    </h2>
    <p class="text__item item--paragraph">
        Paragraph
    </p>
    <a href="#" class="text__item item--button button button--primary">
        Button
    </a>
</div>

This image illustrates basically what I want to achieve.

image grid

Thanks.

Does this answer your question? Equal height rows in CSS Grid Layout — Awais
– Awais, Commented Jan 10, 2020 at 11:50
First, you decide which concept do you want to use. Grid or flexbox? — Revti Shah
– Revti Shah, Commented Jan 10, 2020 at 12:12

marc_s · Accepted Answer · 2020-01-19 19:40:50Z

2

Yes it is possible, and in so many different ways.

Let me show one:

.grid {
  
  display: grid;
  
  grid-template-columns: 20% 60%; /* Column width size here*/
  grid-template-rows: 100px 200px; /* Row height size here*/
  
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.item.a{
  background-color: red;
}

.item.b{
  background-color: green;
}

.item.c{
  background-color: blue;
}

.item.d{
  background-color: yellow;
}

<div class="grid">
  <div class="item a"></div>
  <div class="item b"></div>
  <div class="item c"></div>
  <div class="item d"></div>
</div>

If you really like CSS Grid Layout and want to learn more about i would recommend you this website here.

Hope it helps, :)

edited Jan 19, 2020 at 19:40

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jan 10, 2020 at 12:10

Victor Hugo

1086 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user16603211 Over a year ago

Since these rows have the same width I don't see how this answers the question... the OP wanted different widths, not heights...

Collectives™ on Stack Overflow

CSS Grid Rows to have different widths

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related