[{"id":"0f208514-b2a8-4e3e-bc9b-883b3e09581e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Display","styles":{}}],"children":[]},{"id":"fedd6109-9521-475c-91d8-57fb6b1265d0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The display property defines how an element behaves in the layout flow and how it interacts with surrounding elements.","styles":{}}],"children":[]},{"id":"d706f2ba-2789-441f-bb4e-7fb30d78ec46","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Value","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Description","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"block","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Element takes the full width of the container and starts on a new line","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"inline","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Element only takes the space its content needs and does not start a new line","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"inline-block","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Similar to inline but allows width and height to be set","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"none","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Element is removed from the layout","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]},{"id":"95e29d20-12c9-4fd3-bfaf-dde73c22a2e9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"ea2de474-195f-46ce-9af3-b6e023a2a5fd","type":"sandpack","props":{"files":"[{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n\\nDisplay Property Example\\n\\n\\n\\n\\n\\n\\n

display: block

\\n

Block Element 1

\\n

Block Element 2

\\n

\\n\\n

display: inline

\\n

\\n Inline 1\\n Inline 2\\n Inline 3\\n

\\n\\n

display: inline-block

\\n

Box 1

\\n

Box 2

\\n

Box 3

\\n

\\n\\n

display: none

\\n

This element is hidden

\\n

The hidden element above does not appear in the layout.

\\n

\\n\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"}]","template":"vanilla-ts","activeFile":"","showCode":"true","width":"100%","height":"auto"},"children":[]},{"id":"c3c581ee-eb7e-4fcd-b087-43970b58a92e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"22a6282f-f7eb-4614-baac-548f17c6da0f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Flexbox","styles":{}}],"children":[]},{"id":"2384e8f6-a0cb-47ea-93bd-987aafd9c5b4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flexbox (Flexible Box Layout) is a one-dimensional layout system used to arrange elements in a row or column.","styles":{}}],"children":[]},{"id":"71bdb879-2d9d-4478-9b91-974dfff6cbea","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"ae22946e-003e-4c5f-b811-e465f7bba05e","type":"columnList","props":{},"children":[{"id":"c6ae900e-b822-48ba-abcc-184d11087f88","type":"column","props":{"width":0.7010566564187356},"children":[{"id":"f3f65336-4edf-4b50-957f-d457f4f5ea64","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":6,"isToggleable":false},"content":[{"type":"text","text":"Flex Container Properties","styles":{}}],"children":[]},{"id":"1064d781-38c4-4b13-a418-069537558680","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Property","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Description","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"display","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Defines a flex container","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"flex-direction","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Defines the direction of the main axis","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"flex-wrap","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Controls whether items wrap to the next line","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"flex-flow","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Shorthand for flex-direction and flex-wrap","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"justify-content","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Aligns items along the main axis","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"align-items","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Aligns items along the cross axis","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"align-content","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Aligns multiple rows of items","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"gap","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Defines spacing between items","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]}]},{"id":"c94319f6-2be4-40bc-8a33-605235bf2b5c","type":"column","props":{"width":1.2989433435812643},"children":[{"id":"013148da-720e-4d0a-860e-f1a6175a644d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":6,"isToggleable":false},"content":[{"type":"text","text":"Flex Item Properties","styles":{}}],"children":[]},{"id":"b8971a86-f758-46a2-9a9f-d2d4dbcb7e6c","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Property","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Description","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"order","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Controls the order of flex items","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"flex-grow","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Defines how much an item can grow","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"flex-shrink","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Defines how much an item can shrink","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"flex-basis","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Defines the initial size of an item","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"flex","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Shorthand for grow, shrink, and basis","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"align-self","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Overrides container alignment for one item","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]},{"id":"951cb648-67fa-4fe7-aff5-1e26bc319f21","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]}]},{"id":"1a531bdf-0b2d-41ab-83d9-aa0df958a827","type":"sandpack","props":{"files":"[{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n\\nFlexbox Row and Column Example\\n\\n\\n\\n\\n\\n\\n

Flexbox Row

\\n\\n

\\n

Item 1

\\n

Item 2

\\n

Item 3

\\n

\\n\\n

Flexbox Column

\\n\\n

\\n

Item 1

\\n

Item 2

\\n

Item 3

\\n

\\n\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"}]","template":"vanilla-ts","activeFile":"/index.html","showCode":"true","width":"100%","height":"auto"},"children":[]},{"id":"c671aa8a-77ed-4401-9b99-05162990b7e1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flexbox arranges items along a main axis.","styles":{}}],"children":[]},{"id":"9711f080-3a69-42c4-8746-12fb9d7a11b1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"/","styles":{}}],"children":[]},{"id":"2c3b5b57-d3ed-4517-9665-c0e21bf6b769","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Grid","styles":{}}],"children":[]},{"id":"04794d76-f738-465c-9d73-a09420126b75","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"CSS Grid is a two-dimensional layout system designed for building complex page layouts using rows and columns.","styles":{}}],"children":[]},{"id":"e1769eb2-cee3-4eda-be9d-33b3a193ec89","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"It allows precise placement of elements in a grid structure.","styles":{}}],"children":[]},{"id":"998cbf67-aad1-4d45-b70a-a5c092a99530","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"253ff921-52d0-4739-8975-e8d2228bfa2a","type":"columnList","props":{},"children":[{"id":"ea56264b-6b8e-46e1-b370-0d6e4a946549","type":"column","props":{"width":1},"children":[{"id":"3da860e0-28e7-4acb-981e-afb8fa90c9f0","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":6,"isToggleable":false},"content":[{"type":"text","text":"Grid Container Properties","styles":{}}],"children":[]},{"id":"acb653f3-dd49-4242-924b-12d7c91bb30f","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Property","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Description","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"display","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Defines a grid container","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"grid-template-columns","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Defines the number and size of columns","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"grid-template-rows","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Defines the number and size of rows","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"gap","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Defines space between grid items","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"column-gap","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Defines space between columns","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"row-gap","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Defines space between rows","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"justify-items","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Aligns items horizontally inside cells","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"align-items","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Aligns items vertically inside cells","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]}]},{"id":"cabffdb5-bc1c-46e4-a2af-579a4b30d673","type":"column","props":{"width":1},"children":[{"id":"8808ad8a-65e5-4638-bcef-61bfbfa5c8d5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":6,"isToggleable":false},"content":[{"type":"text","text":"Grid Item Properties","styles":{}}],"children":[]},{"id":"ab7eb3c5-855f-4698-8af2-5252a4a71a1a","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Property","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Description","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"grid-column","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Defines how many columns an item spans","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"grid-row","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Defines how many rows an item spans","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"justify-self","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Aligns a single item horizontally","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"align-self","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Aligns a single item vertically","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]}]}]},{"id":"d685a2ae-ee8d-4040-9c51-0589fed3ab9f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"3ea2f76b-f7ff-417f-8296-0da4fe57ae17","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n font-family: sans-serif;\\n -webkit-font-smoothing: auto;\\n -moz-font-smoothing: auto;\\n -moz-osx-font-smoothing: grayscale;\\n font-smoothing: auto;\\n text-rendering: optimizeLegibility;\\n font-smooth: always;\\n -webkit-tap-highlight-color: transparent;\\n -webkit-touch-callout: none;\\n}\\n\\nh1 {\\n font-size: 1.5rem;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n\\nCSS Grid Example\\n\\n\\n\\n\\n\\n\\n

CSS Grid Layout Example

\\n\\n

\\n

Item 1

\\n

Item 2

\\n

Item 3

\\n

Item 4

\\n

Item 5

\\n

Item 6

\\n

CSS Position Property

\\n\\n

Sticky Header (scroll down)

\\n\\n

1. Static

\\n

\\nposition: static (default)\\n

\\n\\n

2. Relative

\\n

\\nposition: relative\\n

\\n\\n

3. Absolute

\\n

\\nContainer (position: relative)\\n\\n

\\nposition: absolute\\n

\\n\\n

4. Fixed

\\n

Scroll the page to see the fixed element stay in place.

\\n\\n

\\nposition: fixed\\n

Position Offset Properties

\\n\\n

\\ntop + left\\n

\\n\\n

\\ntop + right\\n

\\n\\n

\\nbottom + left\\n

\\n\\n

\\nbottom + right\\n

\\n\\n

\\ninset: 80px 150px\\n

\\n\\n

\\nThe colored boxes are positioned using offset properties relative to the container.\\n

\\n\\n\\n\\n

\\n\\n

\\n

Card 1

\\n

Content inside the container.

\\n

\\n\\n

\\n

Card 2

\\n

Containers keep layouts organized.

\\n

\\n\\n

\\n

Card 3

\\n

They also control page width.

\\n

\\n\\n

display: block

display: inline

display: inline-block

display: none

Flexbox Row

Flexbox Column

CSS Grid Layout Example

CSS Position Property

1. Static

2. Relative

3. Absolute

4. Fixed

Position Offset Properties

Container Layout

Card 1

Card 2

Card 3