![]() You could also set the height of the square with height: however that is relative to the height of the parent element, the container, which in this case does not have a set height. Simple Grid is a 12-column, lightweight CSS grid to help you quickly build responsive websites. If you remove this property the height of the elements will be equal to 0, and therefore they will disappear. Padding-bottom: 30% This is giving the squares a vertical height as a percentage of the width of the container. square class:įloat: left is just getting all the squares to slide up and to the left. Lastly, to touch on the last two properties of the. The will just resize themselves to fit the container. CSS Grid Generator is a shiny new generator coded by Sarah Drasner.The interface is super sleek and you can put together a basic CSS Grid layout in no time. If your container div is hard coded with a pixel width, the percentage of the inside squares will be unaffected. So I must set my margins to 6.66% in this instance. Now I need to divide that by 6, representing my 6 margins as shown above: So in this example here I have set my squares to be 20% wide each.ġ00-60 = 40 <– That gives me the remaining percentage of horizontal width. Therefore I need to divide the remainder of my hundred by 6 to set my margin width percentages. If I want to have 3 squares on each row, I will have 6 horizontal margins (2 on each side). Remember the sum of these items must be equal to 100%. It is the auto horizontal margin that centers the container in the page. ![]() So the 0 margin on top and bottom is irrelevant, you can set that to what you want. Margin: 0 auto : This is just a hacky way of centering the whole container grid using margin, as there is no proper alignment property for whole divs (unlike text or content). If you want the grid to cover the whole page then set this to 100%. It just the total width of the grid in the page. Let’s break down what is happening here line by line. See the Pen Simple Grid by Nicholas on CodePen. #squareContainer Īnd here you have a live editable version to play with.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |