If Instagram Grids are your canvas, then posts are your paintbrush. We apply that offset to margin-bottom to get the following. The creative potential of grids is limitless. ![]() That offset will be equal to 25% of the element height (see Figure 1). ![]() Toggling the font-size of the first demo to illustrate the white space issueĮvery other row needs some negative offset so the rows overlap rather than stack directly on top of each other. Since we are dealing with inline-block, we need to fight the common white space issue (using the font-size trick) and we consider some margin (defined with the variable M) to control the space. California Residents can learn how personal information is collected, including how it is used, whether it is sold or shared, and how long it is retained. We have a main element that holds a container which, in turn, holds the hexagons. */įont-size: 0 /* disable white space between inline block element */įont-size: initial /* we reset the font-size if we want to add some content */Ĭlip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%) Instagram Grid Inspo 1: Create Bold Color-blocking Themes like Ohh Deer Nothing is as pleasing on the eye as a completely color-blocked scroll and Ohh Deer does this like no one else ohhdeer The stationery brand boldly switches up their color theme every couple of weeks. The markup can go something like this: ĭisplay: flex /* we will talk about this later. Creating a hexagonal shape using clip-pathĮach hexagon is an inline-block element. Bennett Feely’s Clippy is a great online generator for clip paths. We’ve curated 5 awesome Instagram grid layouts that will look good on your page. We will consider a variable S that will define the dimension of our element. This task is fairly easy using clip-path. Founded in 2009, Codrops is a destination for web design and development enthusiasts. Making a grid of hexagonsįirst, we create our hexagon shape. For example, we can chuck more hexagons in there by adding more divs, and control both the sizing and spacing using CSS variables.Ĭool, right? And this is only one example among many grids we will build in the same manner. In addition to being responsive, the grid also scales. Resize the demo screen and see the magic. ![]() This is a fully responsive hexagon grid made without media queries, JavaScript, or a ton of hacky CSS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |