/*
 * ILM Components -- Grid.
 *
 * Equal cells, as many across as `columns` says. Every direct child is a cell;
 * there is no cell component and no wrapper.
 *
 * `minmax(0, 1fr)` for the reason given in layout-row.css: without it a single
 * long word in one cell widens that column and the grid overflows its parent.
 *
 * Children get `min-inline-size: 0` here rather than carrying it themselves,
 * because a Grid's children are arbitrary components -- a Heading, a Text, a
 * component from a plugin that does not exist yet -- and none of them should
 * have to know they might be laid out in a grid.
 */

.ilm-component--layout-grid {
	display: grid;
	grid-template-columns: repeat(var(--ilm-c-cols), minmax(0, 1fr));
	row-gap: var(--ilm-c-gap);

	/* At most one column's share (1.23.0): the gaps can never outgrow the grid. See layout-row.css. */
	column-gap: min(var(--ilm-c-gap), 100% / var(--ilm-c-cols));
	align-items: var(--ilm-c-align);
}

.ilm-component--layout-grid > * {
	min-inline-size: 0;
}