Lines Matching refs:grid
4 …grid-container>** component is the root container of the grid layout. Within the root container, y…
7 ## Creating a \<grid-container> Component
9 … **\<grid-container>** component in the .hml file under **pages/index** and add a [\<grid-row>](..…
15 <grid-container id="mygrid" gutter="20px" style="background-color: pink;">
16 …<grid-row style="height:100px;justify-content:space-around;width: 80%;background-color: #f67002;ma…
17 10%;"></grid-row>
18 …<grid-row style="height:300px;justify-content:space-around;background-color: #ffcf00;width: 100%;"…
19 …<grid-row style="height:150px;justify-content:space-around;background-color: #032cf8;width: 100%;"…
20 </grid-container>
40 > **\<grid-container>** supports only **\<grid-row>** as a child component.
45 …grid-container>** component to call the **getColumns**, **getColumnWidth**, and **getGutterWidth**…
51 <grid-container id="mygrid" gutter="20px" style="background-color: pink;padding-top: 100px;"
53 …<grid-row style="height:100px;justify-content:space-around;background-color: #4cedf3;width: 20%;ma…
54 40%;"></grid-row>
55 …<grid-row style="height:150px;justify-content:space-around;background-color: #4cbff3;width: 50%;ma…
56 25%;"></grid-row>
57 …<grid-row style="height:200px;justify-content:space-around;background-color: #465ff6;width: 80%;ma…
58 10%;"></grid-row>
59 …<grid-row style="height:200px;justify-content:space-around;background-color: #5011ec;width: 100%;"…
60 </grid-container>
112 ## Adding \<grid-col>
114 After adding a **\<grid-row>** child component to **\<grid-container>**, add a **\<grid-col>** chil…
120 …<grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getCol…
121 …<grid-row style="height: 100px;justify-content: space-around;background-color: #4cbff3;width: 100%…
122 <grid-col span="0">
126 </grid-col>
127 </grid-row>
128 …<grid-row style="height:500px;justify-content:space-around;background-color: #3b55ef;width: 100%;">
129 <grid-col span="0" style="width: 20%;">
133 </grid-col>
134 <grid-col span="0" style="background-color:orange;width: 80%;">
138 </grid-col>
139 </grid-row>
140 …<grid-row style="height: 100px;justify-content: space-around;background-color: #4cbff3;width: 100%…
141 <grid-col style="background-color:#c075ef;" span="0">
145 </grid-col>
146 </grid-row>
147 </grid-container>
172 > **\<grid-row>** supports only **\<grid-col>** as a child component. You can add content only to *…
177 In this example, the content in the list is output cyclically to create a grid layout. When the use…
184 <grid-container id="mygrid" gutter="20" style="margin: 10px;">
185 …<grid-row style="height:200px;width: 100%;background-color: #e7e7e2;margin-top: 50px; padding: 0px…
186 <grid-col span="0" style="width: 40%;">
190 </grid-col>
191 <grid-col span="0" style="width: 60%;">
195 </grid-col>
196 </grid-row>
197 </grid-container>