Tag: css grid item positioning

Intro to CSS Grid Layout Part 5

Posted on by NY Comdori

This is intro to CSS grid layout part 5. So far we have taken a look at following topics. It is recommended to take a look if you are not familiar with css grid layout basics.

In this post, I will focus on explaining how to use grid area with area names for positioning grid items with an example. Let’s take a look it.

Example

We have a layout of multiple items. Note that the header is not spanning to the end but the last slot is empty.

HTML Code

This is the html code used for the example

<div class="challenge">
  <div class="header">Header</div>
  <div class="small-box-1">Small box</div>
  <div class="small-box-2">Small box</div>
  <div class="small-box-3">Small box</div>
  <div class="main-content">Main content</div>
  <div class="sidebar">Sidebar</div>
  <div class="footer">Footer</div>
</div>


CSS Code

We have 4 rows and 4 columns which make 16 unit areas. To use area based positioning, you need to define each unit area with an area name. You can decide the name as you prefer. As you can see, grid-template-areas property is defined with 16 names. For example, head is located at the first row and spanning from first to third column. “.” represents an empty slot. After you define the area representation, all you need to do is to specify the area name for each class. Take a look at line 21 and others.

.challenge {
  width: 1000px;
  margin: 30px auto;
  
  display: grid;
  grid-template-rows: 100px 200px 400px 100px;
  grid-template-columns: repeat(3, 1fr) 200px;
  grid-gap: 35px;
  grid-template-areas: "head head head ."
                      "small-box-1 small-box-2 small-box-3 side"
                      "main main main side"
                      "foot foot foot foot";
  
  & > * {
    background-color: orangered;
    padding: 15px;
    color: white;
    font-size: 30px;
    font-family: sans-serif;
  }
  .header {
    grid-area: head;
  }
  
  .small-box-1 { grid-area: small-box-1; }
  .small-box-2 { grid-area: small-box-2; }
  .small-box-3 { grid-area: small-box-3; }
  
  .sidebar {
    grid-area: side;
  }
  
  .main-content {
    grid-area: main;
  }
  
  .footer {
    grid-area: foot;
  }
}

It is very important to note that you have to have a complete area representation. Since you have 16 unit slots (4 rows * 4 columns), you have to have 16 area names in order to use it. It is fairly simple to use for a simple area layout. However, if you have a complex layout, it could be inconvenient to use it. i.e., 10 rows and 10 columns. In such a case, it would be better to use grid lines instead of names.

Intro to CSS Grid Layout Part 4

Posted on by NY Comdori

This is intro to CSS grid layout part 4 continuing from previous posts. This will specifically focus on how to position grid items based on the name of the grid lines. If you are not familiar with CSS grid layout, please refer to these posts here.

In the previous post, we went over how to position grid items based on their grid line numbers. However, it is often hard to read and understand the code when it’s using line numbers. To improve the readability and maintainability, we want to use names for the line numbers. Let’s take a look at them now.

Example

This is the one we are going to build using CSS grid layout.

HTML Code

<div class="challenge">
  <div class="header">Header</div>
  <div class="small-box-1">Small box</div>
  <div class="small-box-2">Small box</div>
  <div class="small-box-3">Small box</div>
  <div class="main-content">Main content</div>
  <div class="sidebar">Sidebar</div>
  <div class="footer">Footer</div>
</div>


CSS Code

.challenge {
  width: 1000px;
  margin: 30px auto;
  
  display: grid;
  grid-template-rows: [header-start] 100px [header-end box-start] 200px [box-end main-start] 400px [main-end footer-start] 100px [footer-end];
  grid-template-columns: repeat(3, [col-start] 1fr [col-end]) 200px [grid-end];
  grid-gap: 35px;
  
  & > * {
    background-color: orangered;
    padding: 15px;
    color: white;
    font-size: 30px;
    font-family: sans-serif;
  }
  .header {
    grid-column: col-start 1 / grid-end;
  }
  
  .sidebar {
    grid-column: col-end 3 / grid-end;
    grid-row: box-start / main-end;
  }
  
  .main-content {
    grid-column: col-start 1 / col-end 3;
  }
  
  .footer {
    grid-column: col-start 1 / grid-end;
  }
}

Let’s first take a look at how grid-template-rows and grid-template-columns are defined. Typically, you would just list width of each row and column and use the line number. However, in each line number position, you can have a list of names to use instead of numbers.

Name for grid-template-rows

Note that row line number 1 is before the first row which is now named header-start. Now, row line number 2 could have multiple names because it is the position where header ends but all other boxes start. That’s why we also added a name box-start at row line number 2. You can follow the similar logic for all other row numbers.

grid-template-rows: [header-start] 100px [header-end box-start] 200px [box-end main-start] 400px [main-end footer-start] 100px [footer-end];

Name for grid-template-columns

There is a difference for columns because it uses repeat with fractional units. Just putting the name before and after the repeat would be incorrect because it will not put names between those columns. We put names in the repeat keyword like this: repeat(3, [col-start] 1fr [col-end]). It means I want to put a name before and after 1fr column. In order to prevent any name conflict, CSS will automatically add numbers starting from 1.

grid-template-columns: repeat(3, [col-start] 1fr [col-end]) 200px [grid-end];

Usage

Now you can define all element classes using names instead of line numbers. I am only going to note one class as an example here. As you can see sidebar class, it is using names. Since the sidebar is the end column of the grid, it uses col-end 3 and grid-end (3 is automatically added by CSS). The row uses box-start and main-end.

.sidebar {
  grid-column: col-end 3 / grid-end;
  grid-row: box-start / main-end;
}


Conclusion

It is very simple to use names instead of line numbers when positioning grid items. And it is actually recommended practice. In the next post, I will explain how to position grid items based on grid area using names.

Intro to CSS Grid Layout Part 3

Posted on by NY Comdori

This is a continuation of intro to css grid layout articles. Please refer to previous articles for declaring grid layout and fractional units in row/column. This post will specifically focus on the positioning and spanning of the grid item. Let’s take a look at the example image and code first.

Example

HTML Code

<div class="container">
  <div class="item item--1">1: Orange</div>
  <div class="item item--2">2: Green</div>
  <div class="item item--3">3: Violet</div>
  <div class="item item--4">4: Pink</div>
  <div class="item item--5">5: Blue</div>
  <div class="item item--6">6: Brown</div>
</div>

As you see in the above image and the HTML code, each item is placed in the order of declaration which is the default positioning of the CSS grid layout. Then, you might ask a question if it’s possible to place an item to a specific location. For example, how do you place the item 1: orange to the location of 5: blue? There are CSS properties that allow you to change the position.

CSS Code

.container {
  background-color: #eee;
  width: 1000px;
  margin: 30px auto;
  
  display: grid;
  grid-template-rows: repeat(2, 150px);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 60px;
}

.item {
  padding: 20px;
  font-size: 30px;
  font-family: sans-sarif;
  color: white;
  
  &--1 {
    background-color: orangered;
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
    /*grid-row: 2 / 3;*/
    /*grid-column: 2 / 3;*/
  }
  
  &--2 {
    background-color: green;
  }
  
  &--3 {
    background-color: violet;    
  }
  
  &--4 {
    background-color: pink;
  }
  
  &--5 {
    background-color: blue;
  }
    
  &--6 {
    background-color: brown;
  }
}

Take a look at lines 20-23 in the CSS code. You have two choices to change the position.
1. use grid-<row/column>-<start/end>
2. use grid-<row/column> which is a short hand version

Do you remember there are row/column line numbers when you have CSS Grid? If you are not familiar with the concept, please refer to this article. Basically, there are row/column line numbers and you just need to specify row/column start/end position based on the number.

Looking at the image there are 3 row lines: start of the row grid, middle of the row grid and end of the row grid (1,2,3). There are 4 lines in the column: start of the column grid, 2 middle lines, end of the column grid. After specifying row/column start/end points you will notice that item 1 is now placed where item 5 was.

There are shorthand version of specifying row/column start/end which are commented at line 24,25. There is another shorthand version which is using grid-area but I think it is not really readable and didn’t specify here. You can take a look at the documentation for that.

What if more than one items are to be placed on the same position? Simply the last one will be rendered on top of the first one. The first item will not be shown.

What if you put multiple rows or columns in the grid-row or grid-column? It will simply span to take the specified area. Note that grid-column now has start at 2 and end at 4 which should take space from column 2 to 4.

  &--1 {
    background-color: orangered;
    grid-row: 2 / 3;
    grid-column: 2 / 4;
  }

Note that item 6 is now pushed to new row because item 1 is taking up the space. Even though we only specified 2 rows, CSS grid automatically expands to fit the items which is called implicit grid I will discuss in different post.

Another way of specifying the span is like this. Note that instead of specifying the end column in line 4, you can tell how many lines it should span in this case 2. Another special usage is putting -1 (at line 7) which means to span to the end of the columns.

  &--1 {
    background-color: orangered;
    grid-row: 2 / 3;
    grid-column: 2 / span 2;
    
    /*
    grid-column: 2 / -1;
    */
    
  }

Conclusion

We have taken a look at positioning of the grid item. In next post, I am going to explain how to name grid line numbers to improve readability.