• Skip to primary navigation
  • Skip to main content
  • Skip to footer

JH Tech Services

A knowledgebase

  • Portfolio
  • Knowledgebase
  • About

Using columns and flex to make a grid in Elementor

March 9, 2022 by jer0dh

/* add class 'pt-service-grid' to elementor section in each column add an inner-section widget to place your other widgets.  If you don't plan on adding background and such, you could skip the inner-section but these rules' selectors will need to be changed */
/* keep the inner-section widget 100% height */
.pt-service-grid .elementor-inner-section,
.pt-service-grid .elementor-inner-section > .elementor-container {
	height:100%;
}
/* next two rules will make the first child, heading, expand so rest of elements are pushed down.  If a heading in another inner section wraps, then all other headings in the same row will expand as well and center itself*/
.pt-service-grid .elementor-inner-section > .elementor-container .elementor-widget-wrap {
	flex-flow: column nowrap;
}

.pt-service-grid .elementor-inner-section > .elementor-container .elementor-widget-wrap > div:first-child {
	flex:1; /* expand/grow if needed*/
	display: flex;
	justify-content:center;
	align-items: center;
}

/* Add as many columns in the elementor section as needed */
@media screen and (min-width: 416px) {

.pt-service-grid > .elementor-container {
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-flow: row wrap;
}

.pt-service-grid > .elementor-container > .elementor-column {
	flex: 1;
	width: 406px;
	min-width: 406px;
	max-width: 406px;
}
	
}
  • Knowledgebase

Footer

  • Portfolio
  • Knowledgebase
  • About

© 2023