𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢

A ʟɪɴᴇ ᴏғ ᴄᴏᴅᴇ ᴏғ ᴛʜᴇ ᴅᴀʏ.

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
aspect-ratio: 16 / 9

Forces an element to respect the aspect ratio.

See more lines here: https://t.co/NGzpYt5X7C
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
width: clamp(23ch, 50%, 46ch)

Sets an absolute min and max size, and the actual size of the element.

See more lines here: https://t.co/xOz3gqwPOK
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
justify-content: space-between

Places the first and last items to the edges, with the remaining space evenly distributed between the items.

See more lines here: https://t.co/nodVU83qdT
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))

Creates responsive layout with automatically-placed and flexible grid items.

See more lines here: https://t.co/3BnDxx33wq
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
grid-template-columns: repeat(12, 1fr)

Creates a 12-span grid.

See more lines here: https://t.co/Wg9DjnmEs3
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
grid-template: auto 1fr auto / auto 1fr auto

Creates a classic layout: header, left sidebar, content, right sidebar, and footer.

See more lines here: https://t.co/T7btAayFyi
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
grid-template-rows: auto 1fr auto

Makes sticky footer and does not wrap grid items when the screen size changes.

See more lines here: https://t.co/dQSOAslICu
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
minmax(150px, 25%)

Sets the minimum and maximum width of the grid item.

See more lines here: https://t.co/CKDYGAhh4k
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
flex: 0 1 150px

Makes the flex item stretched on desktop and not streched on mobile, with 150px of base width.

See more lines here: https://t.co/olm4XpWrI8
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
place-items: center

Centers items inside grid item.

See more lines here: https://t.co/PGR52tkY0d
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
display: contents

Replaces current element's box by their child and pseudo-boxes.

See more lines here: https://t.co/0c6TrhmMGw
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
display: inline-table

Sets current element as an inline table type.

See more lines here: https://t.co/Srv35q1glx
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
display: table

Sets current element as a table type.

See more lines here: https://t.co/5MhqpGegVd
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
display: inline-grid

Sets current element as an inline grid type.

See more lines here: https://t.co/HzESDMkxIL
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
display: grid

Sets current element as a grid type.

See more lines here: https://t.co/1IHvpkXmWa
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
display: inline-flex

Sets current element as an inline flex type.

See more lines here: https://t.co/yppzSokWpE
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
display: flex

Sets current element as a flex type.

See more lines here: https://t.co/fd5H4q4pIV
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
display: inline-block

Sets current element as an inline block type.

See more lines here: https://t.co/PUgUvlYk0l
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
display: block

Sets current element as a block type.

See more lines here: https://t.co/3sQZnhTYyo
#loc #cld #codelinedaily #CSS

[𝙲𝚘𝚍𝚎 𝙻𝚒𝚗𝚎 𝙳𝚊𝚒𝚕𝚢 @CodeLineDaily]

Did you know of this line of code:
li::marker {}

Targets list marker.

See more lines here: https://t.co/qkp2PBekTI
#loc #cld #codelinedaily #CSS