CSS Grid

  • I coded my website with HTML5 and CSS3.

    Introduced in 2017, CSS Grid is the real game changer that makes a truly responsive website. With CSS grid, I don't need to set hard rules. The grid is like a matrix. I can freely determine the grid's (matrix) dimensions, sizes, and apply any fancy styles for each element without worrying about the screen size. Back in 2017, only a few of browsers support CSS Grid. Technology involves and adapts very quickly. Now in 2020, almost all modern browsers and mobile browsers can display CSS Grid based websites beautifully.

    My site is tested to work nicely with Safari v.13.0 on macOS 10.15 Catalina; Google Chrome v.79, Firefox v.71.0 and Microsoft Edge v.44 on Windows 10. And no! I do not use Internet Explorer and don't care to test on it either.

    P.S. My website uses external fonts resource provided by Google fonts; and all videos are hosted by YouTube. Make sure your internet access has no restriction to Google and YouTube.

  • In the past few of years, modern websites are written to be "responsive", or so called "mobile friendly". This means websites should be smart enough to detect user's device screen size or resolution and adjust the contents seamlessly. When I am not on my iPhone, say when I am browsing webpages on a bigger computer monitor screen, I also would like to be able to freely drag the browser's size without worrying about part of the contents being annoyingly blocked, and I then would have to use my mouse to drag the slider on the right or on the bottom to show the blocked contents.

    There were different approaches prior to CSS Grid to make a responsive website. For example, I can use CSS media queries to apply different styles for different media types or device sizes. I may set some parameters: if the screen width resolution is at least 500px, contents are displayed in 3 columns otherwise in 1 column.

    CSS Flexbox is a little smarter than @media rule. I can ask the browser to determine the width of the column with a given screen size. Flexbox is very nice but limited to one dimension.

    Media queries and flexbox are not conflicting with CSS Grid. I may work them all together in my style sheet in harmony to achieve my design goals.