For example, hierarchical grids are great for online news platforms. A hierarchical grid may be the best fit if one item on your page will always be more important than the surrounding elements. Take time to think through what type of grid - column, modular, or hierarchical - best suits your needs. How you use and set up a grid is fundamental to creating well thought out layouts and experiences for your user.Ĭhoose the right grid for your needs. Be sure to communicate with your developers the grid structure used when creating the design, so they can implement it accordingly. It is used by both designers and developers alike. This space can be fixed or expressed as a percentage of the screen width and can change at different breakpoints.Īt the mobile size, Behance’s one-column grid (left) was reflowed into a four-column grid structure (right).Įven more importantly, the grid is not a throw-away concept. Content does not live in the margins of a grid. Margins: This refers to the left and right outermost areas on the screen. For example, wider gutters are appropriate for larger screens, whereas smaller gutters are appropriate for smaller screens like mobile. Gutter widths are fixed values but can change based on different breakpoints. Gutters: The gutter is the space between columns that separates elements and content from different columns. For example, a grid on a mobile device might have 4 columns and a grid on a desktop might have 12 columns. To adapt to any screen size, column widths are generally defined with percentages rather than fixed values and the number of columns will vary. Elements and content are placed in columns. Regardless of the type of grid you are using, the grid is made up of three elements: columns, gutters, and margins.Ĭolumns: Columns take up most of the real estate in a grid.
The most important elements and pieces of content take up the biggest pieces of the grid. Hierarchical grid: Content is organized by importance using columns, rows, and modules. Modular grids are great for ecommerce and listing pages, as rows are repeatable to accommodate browsing. This intersection of columns and rows make up modules to which elements and content are aligned. Modular grid extends the column grid further by adding rows to it. UI elements and content are then aligned to these columns. The column, modular, and hierarchical grid are commonly used in interfaces.Ĭolumn grid involves dividing a page into vertical columns.
0 kommentar(er)
