I have been experimenting with CSS Grids and have actually used CSS Grids in the old Joomla Protostar template, and I have to say, I love CSS Grids. I read an article by one to the Mozilla developers who says that we can just change the Bootstrap class attributes to CSS Grid attributes and after reading that, I think we should replace the Bootstrap CSS with CSS Grids equivalents, or make Joomla 4.0 CSS Grics first with a fall back to Bootstrap 4.0

I would like to see Joomla 4.0 wholeheartedly embrace CSS Grids as I don't want to have to make these same replacements for Bootstrap 4 classes.

I have talked to component develops, however, who say that rep[lacing Bootstrap with CSS Grids, even if done in a cleaver way, may introduce some issues.

I took the foillowing from Dan Browne at Mozilla who suggested that we can replace the Bootstrap classes with CSS Grids See: Replace Bootstrap Layouts with CSS Grid]

/**** Bootstrap ****/

.container-fluid {
  margin-left: auto;
  margin-right: auto;
  margin-top: -3px;
  padding-left: 0;
  padding-right: 0;
}

.row-fluid {
  width: 100%;
  *zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
  display: table;
  content: "";
  line-height: 0;
}
.row-fluid:after {
  clear: both;
}
.row-fluid [class*="span"] {
  display: block;
  width: 100%;
  min-height: 28px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  margin-left: 1.127659574%;
  *margin-left: 1.0744680846383%;
}

 .row-fluid .span12 {
    width: 99.99999999%;
    *width: 99.946808500638%;
  }
  .row-fluid .span11 {
    width: 91.489361693%;
    *width: 91.436170203638%;
  }
  .row-fluid .span10 {
    width: 82.978723396%;
    *width: 82.925531906638%;
  }
…

.row-fluid .offset12 {
  margin-left: 104.255319138%;
  *margin-left: 104.14893615928%;
}
.row-fluid .offset12:first-child {
  margin-left: 102.127659564%;
  *margin-left: 102.02127658528%;
}
.row-fluid .offset11 {
  margin-left: 95.744680841%;
  *margin-left: 95.638297862277%;
}
.row-fluid .offset11:first-child {
  margin-left: 93.617021267%;
  *margin-left: 93.510638288277%;
}
.row-fluid .offset10 {
  margin-left: 87.234042544%;
  *margin-left: 87.127659565277%;
}
.row-fluid .offset10:first-child {
  margin-left: 85.10638297%;
  *margin-left: 84.999999991277%;
}
…

/**** CSS Grids ****/

.container-fluid {
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  padding-left: 0;
  padding-right: 0;
}

.row-fluid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
 }

.row-fluid:before,
.row-fluid:after {
  display: none;
}
.row-fluid:after {
  clear: none;
}
.row-fluid [class*="span"] {
  display: inline-flex;
  grid-column: span12;
  min-height: 28px;
  box-sizing: border-box;
}

.row-fluid .span12 {
  grid-column: span12;
}

.row-fluid .span11 {
  grid-column: span11;
}

.row-fluid .span10 {
  grid-column: span10;
}
…

.row-fluid .offset12 {
  grid-area: 1 / 12 / 1 / 12; /* This would place all content in the 12th column. */
}

.row-fluid .offset12:first-child {
  grid-area: 1 / 12 / 1 / 12; /* This would place all content in the 12th column. */
}

.row-fluid .offset11 {
  grid-area: 1 / 11 / 1 / 12; /* This would place all content in columns 11 - 12. */
}

.row-fluid .offset11:first-child {
  grid-area: 1 / 11 / 1 / 12; /* This would place all content in columns 11 - 12. */
}

.row-fluid .offset10 {
  grid-area: 1 / 10 / 1 / 12;  /* This would place all content in columns 10 - 12. */
}

.row-fluid .offset10:first-child {
  grid-area: 1 / 10 / 1 / 12; /* This would place all content in columns 10 - 12. */
}

Thanks, Tim Michel tmichel@webdevtim.com

Set to "open" on behalf of @Quy by The JTracker Application at issues.joomla.org/joomla-cms/23715

@wilsonge Move to Discussions?

No I’m just going to close this one. We’re using grid in several key places like the article blog layout and backend dashboard but we have no intention for now to expand that and replace bootstraps grid