Please enable JavaScript.
Coggle requires JavaScript to display documents.
Positioning - Coggle Diagram
Positioning
Grid Layout
A HTML element becomes a grid with the following code: display: grid; or display: inline-grid;
You can set the grid-column-gap and grid-row-gap
And the child elements should specify where the grid-column-start and grid-column-end is. (This controls where the element appears).
Disadvantages
-
May limit creativity, some designs require more abstract layouts.
-
Advantages
Reduced code bloat. Rather than creating extra HTML elements to contain your grid, columns, and rows, your grid tracks are created within your stylesheet.
-
-
-
-
Content always stays within the box, so no need to worry about overflow.
Why would I use Grid?
CSS Grid Layout enables two-dimensional layout without requiring the additional markup for row wrappers. As a two dimensional layout method you can cause elements in your design to span rows, in a predictable and robust way.
Grid would be used as you need to have a gap between block elements — another thing that's very helpful in CSS grid, that we don't have in Flexbox, is the gap property.
CSS Grid basically allows you to separate content into columns and rows, sort of like a table, but can be used for the main elements on the page such as your header, menu, main and footer. It removes the need for floats.
Flexbox
Advantages of flexbox include space allocation being simpler and it doesn't require much code to implement, also it can be used to lay out content in any direction on a page(left, right, bottom or top).Can achieve equal-column layouts very easily, and bits of content can have their visual order reversed or re-arranged.
You would consider using Flexbox when you have a small design to impliment, you need to align elements, or you need a content driven design.
A module that aims to provide a more effiecient way of laying out, aligning, and distributing items in a container. Even when resized.
-
Disadvantages
-
-
Content within can dictate layout which can cause the page to re-layout when bumped up against other elements.
-
-
Box Model
Advantages: The box model has been around for a long time and is one of the most supported by browsers with the box model you'll have the least amount on inconsistencies
Disadvantages
Borders and margins can make it difficult to to calculate how much space they take up.
You have to use media queries to make it responsive, but it is not as responsive as other positioning methods
it relies on a combination of floats and clears to make things work
The box model is essentially a box that wraps around each HTML Element. It is made up of margins, padding, the content itself as well as borders. every element in a page is a rectangular box
Content: Where text, images etc. appear
Margins Transparent section that clears an area outside of the border
Padding Transparent section that clears an area outside of the content
Borders Goes around the padding and the content
-
You would use the box model for more basic structuring for a web page and to customize individual elements on the page.
