{"id":84,"date":"2020-10-22T10:13:54","date_gmt":"2020-10-22T15:13:54","guid":{"rendered":"https:\/\/wowfall2020.londietmartin.com\/?p=84"},"modified":"2020-11-01T18:43:41","modified_gmt":"2020-11-02T00:43:41","slug":"improving-with-css-grid-and-online-communication","status":"publish","type":"post","link":"https:\/\/wowfall2020.londietmartin.com\/?p=84","title":{"rendered":"Improving With CSS Grid And Online Communication"},"content":{"rendered":"\n
\"\"
CB Creative Blog<\/a><\/figcaption><\/figure>\n\n\n\n

CSS grid layout<\/strong>\u00a0or\u00a0CSS grid<\/strong>\u00a0is a technique in\u00a0Cascading Style Sheets<\/a>\u00a0that allows web developers to create complex\u00a0responsive web design<\/a>\u00a0layouts more easily and consistently across browsers.[1]<\/a><\/sup>\u00a0There have been other methods for controlling web page layout methods, such as\u00a0tables<\/a>, the\u00a0box model<\/a>, and\u00a0CSS flex box<\/a>. CSS grid is currently not an official standard (it is a\u00a0W3C Candidate Recommendation<\/a>) although it has been adopted by most major browsers.[2]<\/a><\/sup><\/p>Wikipedia, CSS Grid Layout<\/a><\/cite><\/blockquote>\n\n\n\n

CSS Grid is one of the most important functions in building a responsive website. With the vast variety of screen sizes, it is presidents to have a website that will flow depending on the device being used whether it is a watch, fridge, phone, tablet, computer, or car display. The list of devices that are used to browse the web is ever-growing and so should our skills. <\/p>\n\n\n\n

The UK SEO Service HOBO<\/a> has a great article on the most used screen sizes today. The visual presentation is the first step in communication online. If the audience is unable to easily view your site or if the layout is chaotic then you have virtually no chance to get your message across. Another important aspect when it comes to creating a website is understanding your audience. Some audiences will have an easier time navigating a detailed website than that of others.\u00a0 The Pew Research Center<\/a> has a great article detailing the wide variety of individuals on the web and the growing diversity of screen sizes. If you compare your phone with a friend you will likely find they have a completely different screen size. Better yet count how many screens of different sizes you own that are able to view the internet. In my house alone I have over nine screens that could be used to view a website. Overall it is unprecedented that any website is built with a flexible layout that is able to shift depending on the screen size and resolution.<\/a> Currently, the leading screen widths are 360px, 1366px, and 1920px. (Mobile, Desktop, & Tablet)<\/p>\n\n\n\n

Learning Grid<\/h2>\n\n\n\n

Now that you understand the importance of creating a fluid website layout, how do you create one? While there are multiple ways to create a fluid layout in CSS we will be focusing on CSS Grid, a newer addition to the CSS world and the web. There are plenty of resources available to dive into the grid world. Below I have created a chart with a few of my favorite introductory materials and what they have to offer.<\/p>\n\n\n\n

Grid Garden<\/a><\/td>A fun interactive game where you use Grid code to grow and water a garden. While it does not cover every aspect of Grid it does go over the basics and is even a great source for quick review.<\/td><\/tr>
Grid Cheat Sheet<\/a><\/td>This site provides a quick reference guide of Grid code.  <\/em>If you know how to use the code but have not touched it in a long time it is great to have an easy reference to turn to.<\/td><\/tr>
Mozilla MDN<\/a><\/td>For an in-depth guide to all things not only Grid but also web design and development in general. <\/td><\/tr>
User-Agent Switcher for Chrome<\/a><\/td>An excellent application for testing screen sizes for multiple devices as you develop a website. <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Simply put the CSS Grid provides a grid-based layout with rows and columns allowing for easy design of a website without the use of floats<\/a> and positioning<\/a>. Currently, Grid is supported by all modern browsers. Spaces can be designated between each row and\/or column. An element of a website can span multiple columns and\/or rows depending on the desired layout. \u201cThe basic difference between CSS Grid Layout and CSS Flexbox Layout<\/a> is that flexbox was designed for layout in one dimension – either a row or a column. Grid was designed for two-dimensional layout – rows, and columns at the same time. The two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you get to grips with Grid.\u201d – MDN Web Docs<\/a>\u00a0<\/p>\n\n\n\n

If reading documentation is not your cup of tea you can find plenty of content available on Youtube to learn more about CSS Grid.<\/p>\n\n\n\n

\n