<mvc:View
	controllerName="sap.f.sample.GridListBreakPoints.C"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:grid="sap.ui.layout.cssgrid"
	xmlns:f="sap.f">
	<Slider value="100" liveChange="onSliderMoved" />
	<Panel id="panelForGridList" backgroundDesign="Transparent">
		<headerToolbar>
			<Toolbar height="3rem">
				<Title text="GridList with break point S, M, L, XL" />
			</Toolbar>
		</headerToolbar>

		<f:GridList
			id="gridList"
			headerText="GridList header"
			items="{/items}">
			<f:customLayout>
				<grid:GridResponsiveLayout layoutChange="onLayoutChange">
					<grid:layoutS>
						<grid:GridSettings gridTemplateColumns="repeat(auto-fit, 8rem)" gridGap="0.25rem 0.25rem" />
					</grid:layoutS>
					<grid:layoutM>
						<grid:GridSettings gridTemplateColumns="repeat(auto-fit, 12rem)" gridGap="0.5rem 0.5rem" />
					</grid:layoutM>
					<grid:layoutL>
						<grid:GridSettings gridTemplateColumns="repeat(auto-fit, 16rem)" gridGap="0.75rem 0.75rem" />
					</grid:layoutL>
					<grid:layoutXL>
						<grid:GridSettings gridTemplateColumns="repeat(auto-fit, 20rem)" gridGap="1rem 1rem" />
					</grid:layoutXL>
				</grid:GridResponsiveLayout>
			</f:customLayout>

			<f:GridListItem>
				<VBox class="sapUiSmallMargin">
					<layoutData>
						<FlexItemData growFactor="1" shrinkFactor="0" />
					</layoutData>

					<Title text="{title}" wrapping="true" />
					<Label text="{subtitle}" wrapping="true" />
				</VBox>
			</f:GridListItem>
		</f:GridList>
	</Panel>
</mvc:View>