"𝚆𝚑𝚊𝚝 𝙲𝚂𝚂 𝚏𝚛𝚊𝚖𝚎𝚠𝚘𝚛𝚔 𝚍𝚘 𝚢𝚘𝚞 𝚞𝚜𝚎 𝚝𝚑𝚎 𝚖𝚘𝚜𝚝?
I’ve been working a lot with CSS for the past few weeks in my Responsive Design & Typography class 📚. One topic that I would like to address today is CSS grid frameworks.
There are two main types of grid systems in web design: fixed and flexible. A 𝙛𝙞𝙭𝙚𝙙 𝙜𝙧𝙞𝙙 𝙨𝙮𝙨𝙩𝙚𝙢 uses units of measurement that do not change, like pixels or inches. 𝙁𝙡𝙚𝙭𝙞𝙗𝙡𝙚 𝙜𝙧𝙞𝙙 𝙨𝙮𝙨𝙩𝙚𝙢𝙨 are the opposite, they use measurements like rems, ems, and percentages so that they can adapt to whatever device they are seen upon.
In my opinion, for a beginner, a great place to start exploring the code side of a CSS Grid Framework is in a fixed grid system.
Example of fixed grid systems :
🔸 960 Grid - The backbone of this framework is a page width of 960 pixels. It also employs vertical containers, typically in sets of 12 or 16.
Example of flexible grid systems:
🔸 Unsemantic - it works in a similar way as the 960 Grid System, but instead of being a set number of columns, it’s entirely based on percentages.
🔸 Foundation - it consist of 12 column grid system, supports stylized CSS components and RTL direction format and compatible with several browsers.
🔸 Bootstrap - besides including a 12 column grid system, it includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
👉🏼 𝙄’𝙢 𝙘𝙪𝙧𝙞𝙤𝙪𝙨 𝙩𝙤 𝙠𝙣𝙤𝙬, 𝙬𝙝𝙖𝙩 𝘾𝙎𝙎 𝙛𝙧𝙖𝙢𝙚𝙬𝙤𝙧𝙠 𝙙𝙤 𝙮𝙤𝙪 𝙪𝙨𝙚 𝙩𝙝𝙚 𝙢𝙤𝙨𝙩?" #Repost @carmencodes_