CSS Grid in Portal - First cell blank

williambbusby · ‎12-23-2022

I'm working to learn CSS Grid for use within Service Portal. I've developed a simple widget to illustrate my issue. Code below:

HTML

CSS

.container {
display: grid;
grid-template-columns: 100px 100px 100px;
}
.item {
display: flex;
justify-content: center;
align-items: center;
border: 5px solid #87b5ff;
border-radius: 3px;
font-size: 2em;
font-family: sans-serif;
font-weight: bold;
background-color: #1c57b5;
}

If you use these elements in the widget editor and preview the widget you'll get a four row, three column grid view. The issue is the first cell at position 0,0 is blank and the cell with a value of '1' begins on the first row in the second position.

Any idea how to get this to make a 3x3 grid the way it should be doing?

Taha Habib · ‎12-24-2022

Hey Williambbusby,

I would suggest using dispay: flex in the container block along with justify content center and flex wrap to achieve your requirement. Also I have added one extra check to ensure screen responsiveness below a certain width.

I am putting in the CSS for your reference. Please have a look at it. This will help you get to your requirement.

.container {
display: flex;                       /* establish flex container */
  flex-wrap: wrap;                   /* enable flex items to wrap */
  justify-content: center;           /* moved it on top to be centerd */                              /*Each block has 150 px width */
  height: 300px;                     /*total height combining all blocks*/
  width:450px;
}

/*Just an additional check to make sure width doesn't affect the screen flex when screen 
gets smaller than 450px for more responsive website*/
@media screen and (max-width: 450px) { 
  div.container {
    width: 100%;
  }
}


.item {
  flex: 0 0 30%;      /* don't grow, don't shrink, width */
  align-items: center;
  border: 5px solid #87b5ff;
  border-radius: 3px;
  font-size: 2em;
  font-family: sans-serif;
  font-weight: bold;
  background-color: #1c57b5;
  
}

Result:

For screen below 450px:

For mid size screen:

I hope the above information would help you with your requirements, If you found this information helpful, please mark this answer as correct and helpful. Thank you.

View solution in original post

Taha Habib · ‎12-24-2022