CODEWITHSUNDEEP
htmlcsscss-grid
tush
tush

Reputation: 71

Card layout in css, using grid

I want to create a card-layout for my html elements. I came across this beautiful exposition by Jen Simmons, but it implements the idea using columns. The thing is that columns do not allow control over the width of each column, meaning equal width for each column.

Since in my webpage I want to keep control over the column width, I turned into grid:

main {
  display: grid;
  grid-template-columns: 60% 40%;
}

And here comes my question: How can I achieve this desired card layout using grid?

The desired visual effect is that each box (element) would appear after the one above it without taking into account the height of the box to its right or left.

The following image demonstrates:

demonstration

Any help about it?

My code:

body {
  margin: 10px;
  width: 500px;
}

main {
  display: grid;
  grid-template-columns: 60% 40%;
}

section {
  margin: 10px;
  border: 1px solid black;
}
<main>
  <section class="A">
    <h3>Header 1</h3>
    <p>Short text</p>
  </section>
  <section class="B">
    <h3>Header 2</h3>
    <p>Some Very long and boring text that lasts over a few lines.</p>
  </section>
  <section class="C">
    <h3>Header 3</h3>
    <p>Some text. Lorem ipsum dolor sit amet.</p>
  </section>
</main>

Upvotes: 1

Views: 250

Answers (1)

Adam Kaminski
Adam Kaminski

Reputation: 66

The way I would do it, would be to re-structure your page, as the grid elements in the same row, are all one block, so if you separate them into the left column and right column, you can achieve this effect.

All I did was group the divs into the left and right columns to determine the heights of each one individually, based on columns and not rows.

body {
            margin: 10px;
            width: 500px;
        }

        main {
            display: grid;
            grid-template-columns: 60% 40%;
        }

        section {
            margin: 10px;
            border: 1px solid black;
        }

        .B {
            height: 60%;
        }
<body>

    <main>
        <div class="rContainer">
            <section class="A">
                <h3>Header 1</h3>
                <p>Short text</p>
            </section>

            <section class="C">
                <h3>Header 3</h3>
                <p>Some text. Lorem ipsum dolor sit amet.</p>
            </section>
        </div>
        <div class="rContainer">
            <section class="B">
                <h3>Header 2</h3>
                <p>Some Very long and boring text that lasts over a few lines.</p>
            </section>
        </div>

    </main>
</body>

Upvotes: 2

Related Questions