🕵️

Horeca Webservice Knowledge Base

CSS Grid

Last updated:

Categories:

In the row column

display:grid;
grid-template-columns: 25% 25% 25% 25%;
grid-auto-rows: auto;
grid-gap: 2%;Code language: CSS (css)
  • display:grid;
    enables css grid
  • grid-template-columns: 25% 25% 25% 25%;
    • creates 4 columns of 25% width each.
    • repeat(4, 25%) – creates 4 equal columns
    • repeat(4, 1fr) – creates 4 equal columns without setting a specific size
  • grid-auto-rows: auto;
    rows will be auto-generated as needed with a size (or height) set to auto. The height of each row will be determined by the vertical height of the content (or modules) within the row
  • grid-template-rows: repeat(5, 20%);
    if you want to specify the rows
  • grid-gap: 2%;
    To set the padding between the columns and rows. There is a default gap if not used. You may need to use this if you use object-fit on images.

Move and resize items

You can change the position of items like Divi modules in the grid by dragging them around, or with css in the modules.

To move a module to a different position, you need to add two lines of CSS to the module.

grid-column: 1 / 2;
grid-column: 1 / span 1;
grid-row: 2 / 4;
grid-row: 2 / span 2;Code language: HTTP (http)
  • grid-column: 1/2;
    • defines the position of the module (or grid item) horizontally
    • start on column 1 end before column 2
    • or write as span 1 (span 1 column)
  • grid-row: 1/3;
    • defines the position of the module (or grid item) vertically
    • start on row 2 end before row 4.
    • or write as span 2 (span 2 rows)
  • Set both to ‘auto’ to set the order to the default location. Do this for tablet and mobile.

Align module content

Vertical align center

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;Code language: CSS (css)

Make images fit the entire column

  • Give them a css class: hws-fit-image
  • You may need to add the column-gap in the grid settings of the column.
  • Disable the show space below image setting.
/* -- START CSS grid items -- */
.hws-fit-image img{
height: 100%;
object-fit: cover;
}
.hws-fit-image .et_pb_image, .hws-grid-image .et_pb_image_wrap {
height: 100%;
}
/* -- END CSS grid items -- */Code language: CSS (css)