|
|
|
|
|
|
|
|
|
|
- CSS Grid control overview
- Creating a CSS Grid control
- Characteristics of CSS Grid controls
- "General" tab
- How to manually define the grid?
- "Details" tab
- "Content" tab
CSS Grid control overview The CSS Grid control is a control layout tool similar to the Flexbox control. Flexbox controls are used to set one-directional layout rules (rows or columns). CSS Grid controls are used to set two-directional layout rules. For example, within a given row, controls can have the same height and the same vertical alignment. The different controls in the grid can: - automatically follow CSS grid positioning rules.
- have specific rules.
Creating a CSS Grid control To create a CSS Grid control: - On the "Creation" tab, in the "Containers" group, click "CSS Grid".
- Click where you want to create the control in the page. The control appears in the editor.
By default, CSS Grid controls have the same characteristics as grids created in HTML. Note: Unrolling the "CSS Grid" menu option immediately sets the number of rows and columns in the CSS Grid control.. To display the characteristics of the control: - Select the control.
- Select "Description" in the control context menu.
Characteristics of CSS Grid controls "General" tab You can view or change the properties of a CSS Grid control in the "General" tab of the description window: - Number of rows, plus height and name of each row.
- Number of columns, plus width and name of each column.
- Cell names.
Row and column sizes are indicated in CSS units. For example, "1fr" represents a fraction of the total space. In a four-column grid, each fraction represents 25% of the width of the control. For rows, the "auto" value simply indicates that the number of rows is defined with an "automatic size", depending on the content. Remarks: - You can name all CSS Grid control elements: columns, rows and cells..
- Any CSS unit can be used.
How to manually define the grid? WEBDEV allows you to define the characteristics of the CSS Grid control via the description window, but you can also define the entire grid in CSS: - In the "General" tab of the control description window, click "Edit CSS
grid code".
- Enter the CSS code to define columns, rows and areas.
This makes it easy to use a grid provided by a web developer or required for external integration. "Details" tab On the "Details" tab, you can define the positioning rules applied by the CSS Grid control. These constraints concern: - automatic field placement (CSS grid-auto-flow property): Fields can be positioned in rows or columns by default, with or without holes.. For example, if the rule does not allow holes, controls will be automatically placed so that no cell in the CSS Grid control is empty. This rule can apply to the whole control or only to rows or columns.
- the alignment of all rows or columns in the field: horizontal alignment of columns (or vertical alignment of rows) and distribution of empty space. You can also define the space between columns and between rows in the grid.
- the default alignment of fields contained in grid rows or columns: it is possible to define the vertical or horizontal alignment of fields within a cell of a CSS Grid control.
- complementary CSS: Custom CSS code indicating the desired anchoring point. This CSS code overrides the parameters.
"Content" tab On the "Content" tab, you can manage the specific behavior of controls in the CSS Grid control. Reminder: By default, the behavior specified in the "Detail" tab of the CSS Grid control window applies to all fields in the grid.. To define an exception to the rule defined for the CSS Grid control: - Select the desired control in the "Content" tab of the control description window.
- Define:
- The position of the field in the grid: you can specify its position, size and/or the name of the host cell.. This makes it possible to specify that the control should be displayed on 2 cells.
- The horizontal/vertical alignment of the control inside the cell.
Note: It is possible to retain the automation alignment parameters defined in the CSS Grid control rules.. - If necessary, write custom CSS code to define other control settings.
Tip: To position a set of fields in the same cell of the CSS Grid control at the pixel, simply group these fields in a Cell control beforehand.. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|