Arrangement of elements across rows and columns in a grid pattern

Question

Arrangement of elements across rows and columns in a grid pattern

Is it possible to span a column that is equivalent to two columns in the first row and then have one column each for the second row, as shown in the screenshot? (There are two columns in the second row in this case)

CSS

main section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(100px, auto);
    justify-items: stretch;
}

#product {
    grid-column-start: 1;
    grid-column-end: 2;
}

#detail {
    grid-column-start: 1;
    grid-column-end: 1;
}

#customer {
    grid-column-start: 1;
    grid-column-end: 1;
}

HTML

<section>
    <div id="product"></div>
    <div id="detail"></div>
    <div id="customer"></div>
</section>

Screenshot taken from - note that there are two columns in the second row in this example.

https://i.stack.imgur.com/eUVMi.png

css css-grid grid-layout

Answer 1

Answer №1

To make the first element span 2, simply include span 2:

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  justify-items: stretch;
}

#product {
  grid-column: span 2;
}

section>* {
  border: 1px solid;
}

<section>
  <div id="product"></div>
  <div id="detail"></div>
  <div id="customer"></div>
</section>

Answer 2

To make the first element span 2, simply include span 2:

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  justify-items: stretch;
}

#product {
  grid-column: span 2;
}

section>* {
  border: 1px solid;
}

<section>
  <div id="product"></div>
  <div id="detail"></div>
  <div id="customer"></div>
</section>

Arrangement of elements across rows and columns in a grid pattern

Answer №1

Similar questions

What is the best way to center these icons vertically in my navigation menu using CSS?

ES6 import of CSS file results in string output instead of object

Images are suddenly encircled by a mysterious border

Works well with Bootstrap but not compatible with other frameworks

Angular application featuring scrolling buttons

List of items:1. The first item is elevated in its position

What is the best way to position a single element in React using the Grid Component without causing any overlap?

CSS: What causes the gap below my border to appear?

Struggling to make the grunt.js task for postcss with autoprefixer function properly

Utilize Tailwind CSS to design a triangular shape positioned in the lower right corner of the parent div

How can I customize the appearance of a checkbox button in JavaFX?

What is the best way to customize the appearance of a toggle switch using useStyles in Material UI, rather than withStyles?

What is the best way to create a never-ending horizontal animation that moves a logo image from right

Creating a well-aligned form using Material-UI

Maintain the alignment of content in the center while expanding background images

When JSF renders bootstrap buttons, they appear without any horizontal padding

Creating a Drop-down Menu Item using React Material UI

How can I convert a PHP class into inline CSS styles?

Tips on toggling the visibility of a div using jQuery and CSS via a toggle switch

Using AngularJS to handle click events and blur events