How to use this tool to create grid template and integrate into o-s-c?

Community
1

Hi,

Let say i want to get easily a grid via this tool and translate this for o-s-c.

How can i insert this code into o-s-c to get the same result ?

<style>
.angry-grid {
   display: grid; 

   grid-template-rows: 4fr 1fr 1fr 3fr;
   grid-template-columns: 8fr 1fr 3fr;
   
   grid-template-areas: 
	'A C E'
	'A C F'
	'B D G'
	'K K K';
   
   gap: 4px;
   height: 100%;
   
}
  
#item-0 {

   background-color: #8dc99e; 
   grid-area: A;
   
}
#item-1 {

   background-color: #0cafcf; 
   grid-area: C;
   
}
#item-2 {

   background-color: #be3e13; 
   grid-area: E;
   
}
#item-3 {

   background-color: #c2b419; 
   grid-area: F;
   
}
#item-4 {

   background-color: #c986ed; 
   grid-area: B;
   
}
#item-5 {

   background-color: #b7cd75; 
   grid-area: D;
   
}
#item-6 {

   background-color: #dddc7b; 
   grid-area: G;
   
}
#item-7 {

   background-color: #8bdb56; 
   grid-area: K;
   
}
</style>

I guess i have to use the css property into the child widgets adding grid-area: "K" etc.

We need to use the good syntax respecting the syntax grid-template short command

Are there some limitations in o-s-c about this feature ? In example, i start to take a panel widget and put some matrix into it. The panel widget is a matrix itself. Is it possible to use that ?

Cheers

2

The gridTemplate property is mapped to the css grid-template property directly except when only a number is provided, in which case it sets the grid-template to none / repeat(${number}, 1fr) to allow defining a number of column easily.

You can use the css without restriction with a few points to keep in mind:

  • grid-template will be set anyway by the widget, so you'll have to use !important to override the css properties it affects (grid-template, grid-template-areas, grid-template-columns and grid-template-rows).

I guess i have to use the css property into the child widgets adding grid-area: "K" etc.

Yes, something like

:host {
  grid-area: A
}