@workday/canvas-kit-docs 15.0.4 → 15.0.5

package/dist/mdx/react/collection/mdx/examples/BasicGrid.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   ListBox,
   useGridModel,
@@ -9,26 +7,41 @@ import {
 } from '@workday/canvas-kit-react/collection';
 import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {createStencil, createStyles, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const useItem = composeHooks(useListItemSelect, useListItemRovingFocus, useListItemRegister);
 
+const itemStencil = createStencil({
+  vars: {
+    background: '',
+  },
+  base: ({background}) => ({
+    background,
+    width: system.size.md,
+    border: `${px2rem(1)} solid ${system.color.border.strong}`,
+  }),
+});
+
 const Item = createSubcomponent('button')({
   modelHook: useGridModel,
   elemPropsHook: useItem,
 })((elemProps, Element, model) => {
+  const backgroundColor = model.state.selectedIds.includes(elemProps['data-id'])
+    ? system.color.surface.alt.default
+    : system.color.surface.default;
+
   return (
-    <Box
-      as={Element}
-      {...elemProps}
-      width={40}
-      border="solid 1px black"
-      style={{
-        background: model.state.selectedIds.includes(elemProps['data-id']) ? 'gray' : 'white',
-      }}
-    />
+    <Box as={Element} {...handleCsProp(elemProps, itemStencil({background: backgroundColor}))} />
   );
 });
 
+const listBoxStencil = createStyles({
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  width: px2rem(200),
+});
+
 export default () => {
   const model = useGridModel({
     columnCount: 5,
@@ -39,7 +52,7 @@ export default () => {
   });
 
   return (
-    <ListBox model={model} as={Flex} flexDirection="row" flexWrap="wrap" width={200}>
+    <ListBox model={model} as={Flex} cs={listBoxStencil}>
       {item => <Item>{item.id}</Item>}
     </ListBox>
   );

package/dist/mdx/react/collection/mdx/examples/DataLoader.tsx

@@ -10,6 +10,8 @@ import {
 } from '@workday/canvas-kit-react/collection';
 import {composeHooks} from '@workday/canvas-kit-react/common';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 function pickRandom<T>(arr: T[]): T {
   return arr[Math.floor(Math.random() * arr.length)];
@@ -28,7 +30,7 @@ const options = Array(1000)
 export default () => {
   const [messages, setMessages] = React.useState<string[]>([]);
 
-  const {model, loader} = useListLoader(
+  const {model} = useListLoader(
     {
       getId: (item: string) => item,
       getTextValue: (item: string) => item,
@@ -61,10 +63,10 @@ export default () => {
   );
 
   return (
-    <Flex gap="xl">
-      <Flex flexDirection="column" gap="zero">
+    <Flex cs={{gap: system.gap.xl}}>
+      <Flex cs={{flexDirection: 'column', gap: 0}}>
         <p>Scroll or focus and use keys to navigate</p>
-        <ListBox model={model} maxHeight={400} width={300}>
+        <ListBox model={model} cs={{maxHeight: px2rem(400), width: px2rem(300)}}>
           {item => (
             <ListBox.Item
               as="button"
@@ -79,9 +81,9 @@ export default () => {
           )}
         </ListBox>
       </Flex>
-      <Flex flexDirection="column" gap="zero">
+      <Flex cs={{flexDirection: 'column', gap: 0}}>
         <p>Events:</p>
-        <Box as="ul" maxHeight={400} overflowY="auto">
+        <Box as="ul" cs={{maxHeight: px2rem(400), overflowY: 'auto'}}>
           {messages.map(message => (
             <li key={message}>{message}</li>
           ))}

package/dist/mdx/react/collection/mdx/examples/MultiSelection.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   ListBox,
   ListItemProps,
@@ -11,6 +9,8 @@ import {
   useListModel,
 } from '@workday/canvas-kit-react/collection';
 import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const useMultiSelectItem = composeHooks(
   useListItemSelect,
@@ -18,18 +18,30 @@ const useMultiSelectItem = composeHooks(
   useListItemRegister
 );
 
+const itemStencil = createStencil({
+  vars: {
+    background: '',
+  },
+  base: ({background}) => ({
+    background,
+    width: system.size.md,
+    border: `${px2rem(1)} solid ${system.color.border.strong}`,
+  }),
+});
+
 const Item = createSubcomponent('button')({
   displayName: 'MultiSelectableItem',
   modelHook: useListModel,
   elemPropsHook: useMultiSelectItem,
 })<ListItemProps>((elemProps, Element, model) => {
+  const backgroundColor = model.state.selectedIds.includes(elemProps['data-id'])
+    ? system.color.surface.alt.default
+    : system.color.surface.default;
+
   return (
     <Element
       role="listitem"
-      {...elemProps}
-      style={{
-        background: model.state.selectedIds.includes(elemProps['data-id']) ? 'gray' : 'white',
-      }}
+      {...handleCsProp(elemProps, itemStencil({background: backgroundColor}))}
     />
   );
 });

package/dist/mdx/react/collection/mdx/examples/OverflowVerticalList.tsx

@@ -1,19 +1,23 @@
-import styled from '@emotion/styled';
 import React from 'react';
 
 import {ActionBar, useActionBarModel} from '@workday/canvas-kit-react/action-bar';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {StyledType} from '@workday/canvas-kit-react/common';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 type MyActionItem = {
   id: string;
   text: React.ReactNode;
 };
 
-const StyledActionbarList = styled(ActionBar.List)<StyledType>({
-  '> *': {
-    flex: '0 0 auto',
+const actionBarStencil = createStencil({
+  base: {
+    flexDirection: 'column',
+    height: '100%',
+    '> *': {
+      flex: '0 0 auto',
+    },
   },
 });
 
@@ -32,14 +36,13 @@ export default () => {
 
   return (
     <>
-      <Box marginBottom="xl" height="50vh">
+      <Box cs={{marginBlockEnd: system.gap.xxl, height: '50vh'}}>
         <ActionBar model={model}>
-          <StyledActionbarList
+          <ActionBar.List
             position="relative"
             as="section"
             aria-label="Overflow example actions"
-            flexDirection="column"
-            height="100%"
+            cs={actionBarStencil()}
             overflowButton={
               <ActionBar.OverflowButton
                 cs={{overflow: 'visible', flex: 0}}
@@ -55,9 +58,9 @@ export default () => {
                 {item.text}
               </ActionBar.Item>
             )}
-          </StyledActionbarList>
+          </ActionBar.List>
           <ActionBar.Menu.Popper>
-            <ActionBar.Menu.Card maxWidth={300} maxHeight={200}>
+            <ActionBar.Menu.Card cs={{maxWidth: px2rem(300), maxHeight: px2rem(200)}}>
               <ActionBar.Menu.List>
                 {(item: MyActionItem) => (
                   <ActionBar.Menu.Item onClick={() => console.log(item.id)}>

package/dist/mdx/react/collection/mdx/examples/Selection.tsx

@@ -14,6 +14,8 @@ import {
   createElemPropsHook,
   createSubcomponent,
 } from '@workday/canvas-kit-react/common';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 // Create a custom hook for our item
 const useItem = composeHooks(
@@ -21,7 +23,9 @@ const useItem = composeHooks(
     return {
       role: 'listitem',
       style: {
-        background: model.state.selectedIds.includes(elemProps['data-id']) ? 'gray' : 'white',
+        background: model.state.selectedIds.includes(elemProps['data-id'])
+          ? cssVar(system.color.surface.alt.default)
+          : cssVar(system.color.surface.default),
       },
     };
   }),

package/dist/mdx/react/collection/mdx/examples/WrappingGrid.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   ListBox,
   useGridModel,
@@ -10,26 +8,41 @@ import {
 } from '@workday/canvas-kit-react/collection';
 import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {createStencil, createStyles, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const useItem = composeHooks(useListItemSelect, useListItemRovingFocus, useListItemRegister);
 
+const itemStencil = createStencil({
+  vars: {
+    background: '',
+  },
+  base: ({background}) => ({
+    background,
+    width: system.size.md,
+    border: `${px2rem(1)} solid ${system.color.border.strong}`,
+  }),
+});
+
 const Item = createSubcomponent('button')({
   modelHook: useGridModel,
   elemPropsHook: useItem,
 })((elemProps, Element, model) => {
+  const backgroundColor = model.state.selectedIds.includes(elemProps['data-id'])
+    ? system.color.surface.alt.default
+    : system.color.surface.default;
+
   return (
-    <Box
-      as={Element}
-      {...elemProps}
-      width={40}
-      border="solid 1px black"
-      style={{
-        background: model.state.selectedIds.includes(elemProps['data-id']) ? 'gray' : 'white',
-      }}
-    />
+    <Box as={Element} {...handleCsProp(elemProps, itemStencil({background: backgroundColor}))} />
   );
 });
 
+const listBoxStyles = createStyles({
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  width: px2rem(200),
+});
+
 export default () => {
   const model = useGridModel({
     columnCount: 5,
@@ -41,7 +54,7 @@ export default () => {
   });
 
   return (
-    <ListBox model={model} as={Flex} flexDirection="row" flexWrap="wrap" width={200}>
+    <ListBox model={model} as={Flex} cs={listBoxStyles}>
       {item => <Item>{item.id}</Item>}
     </ListBox>
   );

package/dist/mdx/react/combobox/examples/Autocomplete.tsx

@@ -135,11 +135,10 @@ export default () => {
           <FormField.Input as={AutoCompleteInput} isLoading={loader.isLoading} />
           <Combobox.Menu.Popper>
             <Combobox.Menu.Card>
-              {model.state.items.length === 0 && (
+              {model.state.items.length < 1 ? (
                 <StyledMenuItem as="span">No Results Found</StyledMenuItem>
-              )}
-              {model.state.items.length > 0 && (
-                <Combobox.Menu.List maxHeight={px2rem(200)}>
+              ) : (
+                <Combobox.Menu.List cs={{maxHeight: px2rem(200)}}>
                   {item => <Combobox.Menu.Item>{item}</Combobox.Menu.Item>}
                 </Combobox.Menu.List>
               )}

package/dist/mdx/react/common/mdx/Responsive.mdx

@@ -6,6 +6,9 @@ import ResponsiveViewport from './examples/ResponsiveViewport';
 
 # Responsive Styling
 
+> **Note**: Some content on this page is outdated and does not follow our latest style patterns. It
+> will be updated soon.
+
 ## What is Responsive Styling?
 
 Responsive styling is an approach to web development that adjusts layout and appearance based on the
@@ -94,6 +97,7 @@ using a `min-width`. See example below.
 ```ts
 import {useTheme} from '@workday/canvas-kit-react/common';
 import {space} from '@workday/canvas-kit-react/tokens';
+
 const theme = useTheme();
 const {up} = theme.canvas.breakpoints;
 const mediaQuery = up('l'); // Returns '@media (min-width: 1024px)'
@@ -134,6 +138,7 @@ This example uses the `xl` breakpoint and only adds a `min-width` of `0` to the
 ```ts
 import {useTheme} from '@workday/canvas-kit-react/common';
 import {space} from '@workday/canvas-kit-react/tokens';
+
 const theme = useTheme();
 const {down} = theme.canvas.breakpoints;
 const mediaQuery = down('xl'); // Returns '@media (min-width: 0)'
@@ -160,6 +165,7 @@ seen in the second example below.
 ```ts
 import {useTheme} from '@workday/canvas-kit-react/common';
 import {space} from '@workday/canvas-kit-react/tokens';
+
 const theme = useTheme();
 const {between} = theme.canvas.breakpoints;
 // Returns '@media (min-width: 320px) and (max-width: 1023.5px)'
@@ -176,6 +182,7 @@ This example uses `xl` as the `end` breakpoint and only adds a min-width to the
 ```ts
 import {useTheme} from '@workday/canvas-kit-react/common';
 import {space} from '@workday/canvas-kit-react/tokens';
+
 const theme = useTheme();
 const {between} = theme.canvas.breakpoints;
 const mediaQuery = between('m', 'xl'); // Returns '@media (min-width: 768px)'

package/dist/mdx/react/common/mdx/examples/ResponsiveStyles.tsx

@@ -36,6 +36,7 @@ const Footer = ({children, ...props}) => (
   </Grid>
 );
 
+// Showcase of old Emotion approach, it is not recommended in v15
 export default () => {
   const ref = React.useRef(null);
   const [width, setWidth] = React.useState(0);

package/dist/mdx/react/common/mdx/examples/ResponsiveViewport.tsx

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import * as React from 'react';
 
 import {getTheme} from '@workday/canvas-kit-react/common';
 import {Box, Grid} from '@workday/canvas-kit-react/layout';
@@ -17,10 +16,8 @@ const styles = {
       gridTemplateRows: 'auto',
       border: '10px solid',
       borderRadius: 30,
-      paddingLeft: space.s,
-      paddingRight: space.s,
-      paddingTop: space.l,
-      paddingBottom: space.l,
+      paddingInline: space.s,
+      paddingBlock: space.l,
     },
     [medium]: {
       gridTemplateAreas: "'Header Header' 'SmallContainer BodyContent' 'Footer Footer'",
@@ -153,6 +150,9 @@ const Circle = styled(Box)({
   transform: 'translate(-50%, 0)',
 });
 
+/* Example is outdated in v15 as we are moving away from styled-components.
+ * TODO: Update this example to use the new styling approach.
+ */
 export default () => {
   return (
     <ParentCont>

package/dist/mdx/react/dialog/examples/Basic.tsx

@@ -5,6 +5,7 @@ import {Dialog} from '@workday/canvas-kit-react/dialog';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -16,20 +17,25 @@ export default () => {
   const handleEmail = () => {
     console.log('Email Submitted');
   };
+
   return (
     <Dialog>
       <Dialog.Target as={PrimaryButton}>Open for Offer</Dialog.Target>
       <Dialog.Popper>
         <Dialog.Card>
           <Dialog.CloseIcon aria-label="Close" />
-          <Dialog.Heading paddingTop="m">Sign Up for 15% Off Your Next Order</Dialog.Heading>
+          <Dialog.Heading cs={{paddingBlockStart: system.padding.md}}>
+            Sign Up for 15% Off Your Next Order
+          </Dialog.Heading>
           <Dialog.Body>
             <FormField>
               <FormField.Label>Email</FormField.Label>
               <FormField.Input as={TextInput} onChange={handleChange} value={value} />
             </FormField>
           </Dialog.Body>
-          <Flex gap="s" padding="xxs" marginTop="xxs">
+          <Flex
+            cs={{padding: system.padding.xxs, marginBlockStart: system.gap.xs, gap: system.gap.md}}
+          >
             <Dialog.CloseButton as={PrimaryButton} onClick={handleEmail}>
               Submit
             </Dialog.CloseButton>

package/dist/mdx/react/dialog/examples/DialogWithFallbackPlacements.tsx

@@ -46,11 +46,17 @@ export default () => {
           <Dialog.Popper placement="top">
             <Dialog.Card>
               <Dialog.CloseIcon aria-label="Close" />
-              <Dialog.Heading cs={{paddingTop: system.padding.md}}>
+              <Dialog.Heading cs={{paddingBlockStart: system.padding.md}}>
                 This is dialog heading
               </Dialog.Heading>
               <Dialog.Body>This is dialog body.</Dialog.Body>
-              <Flex cs={{gap: system.gap.sm, padding: system.padding.xs, marginTop: system.gap.sm}}>
+              <Flex
+                cs={{
+                  gap: system.gap.sm,
+                  padding: system.padding.xs,
+                  marginBlockStart: system.gap.sm,
+                }}
+              >
                 <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
                 <Dialog.CloseButton>Cancel</Dialog.CloseButton>
               </Flex>
@@ -64,11 +70,17 @@ export default () => {
           <Dialog.Popper placement="left">
             <Dialog.Card>
               <Dialog.CloseIcon aria-label="Close" />
-              <Dialog.Heading cs={{paddingTop: system.padding.md}}>
+              <Dialog.Heading cs={{paddingBlockStart: system.padding.md}}>
                 This is dialog heading
               </Dialog.Heading>
               <Dialog.Body>This is dialog body.</Dialog.Body>
-              <Flex cs={{gap: system.gap.sm, padding: system.padding.xs, marginTop: system.gap.sm}}>
+              <Flex
+                cs={{
+                  gap: system.gap.sm,
+                  padding: system.padding.xs,
+                  marginBlockStart: system.gap.sm,
+                }}
+              >
                 <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
                 <Dialog.CloseButton>Cancel</Dialog.CloseButton>
               </Flex>
@@ -82,11 +94,17 @@ export default () => {
           <Dialog.Popper placement="right">
             <Dialog.Card>
               <Dialog.CloseIcon aria-label="Close" />
-              <Dialog.Heading cs={{paddingTop: system.padding.md}}>
+              <Dialog.Heading cs={{paddingBlockStart: system.padding.md}}>
                 This is dialog heading
               </Dialog.Heading>
               <Dialog.Body>This is dialog body.</Dialog.Body>
-              <Flex cs={{gap: system.gap.sm, padding: system.padding.xs, marginTop: system.gap.sm}}>
+              <Flex
+                cs={{
+                  gap: system.gap.sm,
+                  padding: system.padding.xs,
+                  marginBlockStart: system.gap.sm,
+                }}
+              >
                 <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
                 <Dialog.CloseButton>Cancel</Dialog.CloseButton>
               </Flex>
@@ -100,11 +118,17 @@ export default () => {
           <Dialog.Popper placement="bottom">
             <Dialog.Card>
               <Dialog.CloseIcon aria-label="Close" />
-              <Dialog.Heading cs={{paddingTop: system.padding.md}}>
+              <Dialog.Heading cs={{paddingBlockStart: system.padding.md}}>
                 This is dialog heading
               </Dialog.Heading>
               <Dialog.Body>This is dialog body.</Dialog.Body>
-              <Flex cs={{gap: system.gap.sm, padding: system.padding.xs, marginTop: system.gap.sm}}>
+              <Flex
+                cs={{
+                  gap: system.gap.sm,
+                  padding: system.padding.xs,
+                  marginBlockStart: system.gap.sm,
+                }}
+              >
                 <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
                 <Dialog.CloseButton>Cancel</Dialog.CloseButton>
               </Flex>

package/dist/mdx/react/dialog/examples/Focus.tsx

@@ -5,6 +5,7 @@ import {Dialog} from '@workday/canvas-kit-react/dialog';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -16,21 +17,30 @@ export default () => {
   const handleEmail = () => {
     console.log('Email Submitted');
   };
+
   return (
-    <Flex gap="m">
+    <Flex cs={{gap: system.gap.lg}}>
       <Dialog>
         <Dialog.Target as={PrimaryButton}>Open for Offer</Dialog.Target>
         <Dialog.Popper>
           <Dialog.Card>
             <Dialog.CloseIcon aria-label="Close" />
-            <Dialog.Heading paddingTop="m">Sign Up for 15% Off Your Next Order</Dialog.Heading>
+            <Dialog.Heading cs={{paddingBlockStart: system.padding.md}}>
+              Sign Up for 15% Off Your Next Order
+            </Dialog.Heading>
             <Dialog.Body>
               <FormField>
                 <FormField.Label>Email</FormField.Label>
                 <FormField.Input as={TextInput} onChange={handleChange} value={value} />
               </FormField>
             </Dialog.Body>
-            <Flex gap="s" padding="xxs" marginTop="xxs">
+            <Flex
+              cs={{
+                padding: system.padding.xxs,
+                marginBlockStart: system.gap.xs,
+                gap: system.gap.md,
+              }}
+            >
               <Dialog.CloseButton as={PrimaryButton} onClick={handleEmail}>
                 Submit
               </Dialog.CloseButton>

package/dist/mdx/react/form-field/examples/ThemedErrors.tsx

@@ -7,7 +7,7 @@ import {createStyles, cssVar} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
 
 const formFieldHintStyles = createStyles({
-  paddingTop: system.padding.xs,
+  paddingBlockStart: system.padding.xs,
 });
 
 export default () => {

package/dist/mdx/react/layout/Box.mdx

@@ -1,8 +1,14 @@
-import { ExampleCodeBlock } from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import Basic from './examples/Box/Basic';
 
+
 # Box
 
+> **Note**: Some of the content on this page may be outdated and may not follow the latest CK style
+> guidance. Please use care when making updates and carefully review any changes. Prefer using the
+> `createStyles` or `createStencil` utilities along with the latest design tokens to set styles.
+> This page will be updated soon.
+
 `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens. It
 is highly flexible, and its primary purpose is to build other components.
 

package/dist/mdx/react/layout/Flex.mdx

@@ -1,8 +1,14 @@
 import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import Basic from './examples/Flex/Basic';
 
+
 # Canvas Kit Flex
 
+> **Note**: Some of the content on this page may be outdated and may not follow the latest CK style
+> guidance. Please use care when making updates and carefully review any changes. Prefer using the
+> `createStyles` or `createStencil` utilities along with the latest design tokens to set styles.
+> This page will be updated soon.
+
 `Flex` is a low-level layout component that provides a common, ergonomic API for building
 one-dimensional layouts with
 [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).

package/dist/mdx/react/layout/Grid.mdx

@@ -3,8 +3,14 @@ import Basic from './examples/Grid/Basic';
 import GridLayout from './examples/Grid/GridLayout';
 import GridLayoutInteractive from './examples/Grid/GridLayoutInteractive';
 
+
 # Canvas Kit Grid
 
+> **Note**: Some of the content on this page may be outdated and may not follow the latest CK style
+> guidance. Please use care when making updates and carefully review any changes. Prefer using the
+> `createStyles` or `createStencil` utilities along with the latest design tokens to set styles.
+> This page will be updated soon.
+
 `Grid` is a low-level layout component that provides a common, ergonomic API for building
 two-dimensional layouts (rows and columns) with
 [CSS Grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids).