3/26/2023 0 Comments Responsive columns css![]() ![]() With this property, we can ensure that there is some space between the internal elements of the grid. * To use this font, first you’ll need to embed it in your code */Īmong these rules (more precisely within the style of the grid), we used another CSS grid concept: grid-gap, which allows us to set the size of the gap between columns and rows from the grid. * We use variables from CSS to reuse them easily in the colors */ In addition, if we add a little more styling to the section, the grid and the internal elements, the new rules would look like this: /* styles.css */ To solve this problem we are going to explicitly tell the code that each container must be expanded along 6 columns of the grid (half of the total of 12) by adding the property grid-column-end: span 6 to each one of them. If we observe how our layout is coming along, we’ll see that our containers are filling a column within our grid ( that’s good!) but they aren’t occupying half of the section width as we would want (that’s bad!) We could say that there will be two containers in it: one containing the title and subtitle and another one that is going to have the image of the kitten.Īs a result, our section will look like this: Now that we understand a little bit better how our web page is structured, let’s continue by adding the internal elements for the first section. This heuristic of measuring the widths of the elements in columns is the one we are going to use to build our website. ![]() If we look again at the design and try to divide it in 12 columns we can see that (conveniently for this article □) several of the elements have a size related to a number of columns.įor example, the picture from the introduction section is 6 columns wide and each of the 3 cards from the second section is 4 columns wide. While using repeat with the values 12 and fr, basically what I’m writing is “divide the total width from my grid in 12 columns equally”Īnd why 12? Couldn’t it be 2, 5 or 83? Of course it could! But in this example we use 12 as it provides us with flexibility, since having many divisors allows us to easily fraction our design in 1, 2, 3, 4, 6 or 12 columns, or even other combinations if we don’t need them to be the same width □ Hence, if I assign the values 10rem 15rem 12rem, I’ll obtain as a result a grid with three columns (with width-size 10rem, 15rem and 12rem respectively). Why do we need to repeat this value? Well, the most common usage of the grid-template-columns property is to assign a series of values that will define how many columns my grid will have and how wide will each one be. What does this mean exactly? The fr unit refers to a fraction of the available space within the grid and repeat is a function which allows us to determine how many times a measurement is repeated (for example, repeat(3, 1fr) is the same as writing 1fr 1fr 1fr). ![]() Let’s pay attention for a moment to the value repeat(12, 1fr). The rest of the properties are simply giving additional styling for the grid to be at most 70 rem wide and centered in relation to the browser. Īs you can see in the CSS file, we are going to create our grid using display: grid and adding the property grid-template-columns, which defines the size of the columns. Let’s go in order: we’ll start by modeling the basic structure for this section in HTML and CSS, which for now will only have a single grid of twelve columns. Taking a look at the structure we can see that the design has three large sections: the first one is a pink container with a title, a subtitle and an image. Suppose we want to build a website about kittens by replicating the following design: Si querés leer este post en español, clickeá acá. If you ever heard about CSS grid and how it can help you make responsive designs but you haven't tried it yet or you don’t know where to start, join us in the construction of a responsive design with grids and kittens!
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |