grid-col
The <grid-col> is the child component of the <grid-row> container.
Permission List
None
Child Component
Supported
Attribute
Style
Main axis direction of the container. Available values are as follows: |
||||
Whether items in the container are displayed in a single axis or multiple axes. Currently, dynamic modification is not supported. Available values are as follows: |
||||
How items are aligned along the main axis of the current row in the container. Available values are as follows: |
||||
How items are aligned along the cross axis of the current row in the container. Available values are as follows: |
||||
Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows:
|
||||
Type of the view box of the element. Currently, dynamic modification is not supported. Text alignment mode. Available values include: |
||||
Number of rows and columns in the current grid layout. If this attribute is not set, one row and one column are displayed by default. This attribute is valid only when display is set to grid. For example, set grid-template-columns to: (1) 50px 100px 60px: There are three columns. The first column is 50 px, the second column is 100 px, and the third column is 60 px. (2) 1fr 1fr 2fr: There are three columns, and the width allowed by the parent component is divided into four equal shares. The first column occupies one share, the second column occupies one share, and the third column occupies two shares. (3) 30% 20% 50%: There are three columns. The first column occupies 30% of the total width allowed by the parent component, the second column occupies 20%, and the third column occupies 50%. (4) repeat (2,100px): There are two columns. The first column is 100 px, and the second column is 100 px. (5) auto 1fr 1fr: There are three columns. The first column is adaptive to the width required by its child components. The remaining space is divided into two equal shares, one share occupied by each of the two columns. |
||||
Size of the gap between two consecutive rows or columns in a grid layout. You can also use grid-gap to set the same size of the gap between rows and columns. This attribute is valid only when display is set to grid. |
||||
Start and end row numbers of the current item in the grid layout. This attribute is valid only when display of the parent component is grid. (The display attribute of the parent component can be set to grid only for the <div> container.) |
||||
Start and end column numbers of the current item in the grid layout. This attribute is valid only when display of the parent component is grid. (The display attribute of the parent component can be set to grid only for the <div> container.) |
||||
If this attribute is not set, the height required for the element content is used. |
||||
Shorthand attribute to set all padding attributes. The attribute can have one to four values:
|
||||
Shorthand attribute to set all borders. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set. |
||||
Shorthand attribute to set the style for all borders. Available values are as follows: |
||||
Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid. |
||||
Shorthand attribute to set the borders for every side respectively. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set. |
||||
Shorthand attribute to set the width of all borders, or separately set the width of each border. |
||||
Attribute to set widths of left, top, right, and bottom borders. |
||||
Shorthand attribute to set the color of all borders, or separately set the color of each border. |
||||
Attribute to set colors of left, top, right, and bottom borders. |
||||
Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time. |
||||
Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners |
||||
This attribute supports Gradient Styles only but is not compatible with background-color or background-image. |
||||
Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported. |
||||
|
|
|||
How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically. |
||||
|
|
|||
Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. |
||||
Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the display attribute to none.) Available values are as follows: |
Event
Example Code
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
<grid-row style="height:400px;justify-content:space-around;">
<grid-col span="1">
<div style="align-items: center;justify-content: center;height: 100%;width: 100%;">
<text style="color: dodgerblue;" onclick="getCol">Element text</text>
</div>
</grid-col>
<grid-col span="4" style="background-color:orange;">
<div style="width: 100%;height: 100%;padding: 20px;align-items: center;">
<text onclick="getColWidth">Element text</text>
</div>
</grid-col>
</grid-row>
</grid-container>
</div>
/* index.css */
.container {
flex-direction: column;
padding-top: 80px;
}
// index.js
import prompt from '@system.prompt';
export default {
getCol(e) {
this.$element('mygrid').getColumns(function (result) {
prompt.showToast({
message: e.target.id + ' result = ' + result,
duration: 3000,
});
})
},
getColWidth(e) {
this.$element('mygrid').getColumnWidth(function (result) {
prompt.showToast({
message: e.target.id + ' result = ' + result,
duration: 3000,
});
})
}
}