CSS, GRID, DISPLAY, RESPONSIVE DESIGN

{ CSS } Grid

CSS Grid

Why do we need CSS grid?

  • CSS grid is the 2-D layout system for webpage design.
  • This system helps to design the complex layout.
  • Flexbox makes it easy to put elements on the left & right side & center. However, there is a limit to making a grid format.
  • Apart from flexbox, you can easily position items in two dimensions: columns and rows.
  • Similar to the flexbox, you should talk mostly with a parent, not with a child.

rows and columns

  • grid-template-rows: tracks the size of rows.
  • grid-template-columns: tracks the size of columns.
  • gap: shortcut for multiple rows & columns.
  • To give the same size to height & width for rows OR columns, you can utilize repeat() function.
  • e.g. grid-template-columns: repeat(4, 200px)

grid template areas

  • grid-template-areas is property to organize the grid structure.
  • You can organize the structure by defining what elements will be used for.
  • e.g.
.grid {
  display: grid;
  /*  auto: use all areas  */
  grid-template-columns: auto 200px;
  grid-template-rows: 100px repeat(2, 200px) 100px;
  grid-template-areas:
    /* define what each element will be used for */
    "header header header header"
    /* .: allowing the empty space */
    "content content . nav"
    "content content . nav"
    "footer footer footer footer";
}

.header {
  background-color: aquamarine;
  grid-area: header;
}

rows and columns

  • There is another way to make the structure.
  • You can give values to each elements like…
grid-column-start: {value}
grid-column-end: {value}
grid-row-start: {value}
grid-row-end: {value}
  • grid-column-start, grid-row-start: starting with a value upper than 1.
  • grid-column-end, grid-row-end: ending with a value upper than 2.
    /* shortcuts */
    grid-row: 1 / 4
    grid-column: 1 / -1;
  /* You can also count from the end of elements (-1,-2). */
  • span: show how many spaces are allocated.
    /* 2 rows & 2 columns */
    grid-row: span 2;
    grid-column: span 2;
  • Notice that it does not express the start & end point, so you should consider the relationship between other elements.
  • e.g.
.nav {
  grid-row: 1 / 3;
}

.content {

  /* Since there is no starting point for content, this content does not show. */
  grid-row: span 2;
  /* You should define the start point for content like..

  grid-row: 2 / span 2;
  OR
  span for nav tag */

}

line naming

  • You can give a name for lines.
  grid-template-columns:
  [first-line] 100px [second-line] 100px
  [third-line] 100px [fourth-line] 100px [fifth-line]
  grid-template-rows: repeat(4, [my-line] 100px );
  grid-column: first-line / fourth-line;
  grid-row: my-line 2 / my-line 4;

grid template

  • 1fr: fraction means taking as many as spaces available in the ‘container’. (more elastic than pixel).
grid-template-columns: repeat(4, 1fr);
/* takes as many as spaces available in the container, and repeats four times. */
  • For responsive design, you’d better use 1fr or % than px.
  • You need to set height when you are using fractions; note that the grid does not have any height.
  • height: 50vh (half-size of the screen)
  • grid-template: shortcut of grid-template-areas, grid-template-columns, grid-template-rows.
  gird-template:
  "header header header header" 1fr
  "content content content nav" 2fr
  "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr; (row size / column size)

  /* + naming */
  gird-template:
  [header-start] "header header header header" 1fr [header-end]
  [content-start] "content content content nav" 2fr [conent-end]
  [footer-start] "footer footer footer footer" 1fr [footer-end] / 1fr 1fr 1fr 1fr;

Place Items

  • Inside a grid container, justify-items, align-items default is ‘stretch’ for children.

  • justify-items = horizontal, align-items → vertical.

    start: place items to the start point of a cell.
center: to the center of a cell.
end: the end of a cell.
  • items mean cells, while content does the whole grid.
    • justify(align)-items: moves grid elements inside cells.
    • justify(align)-content: moves the whole grid.
  /* Shortcut */
  place-items: y(align) x(justify);
  place-content: y(align) x(justify);
  place-self: y(align) x(justify);

auto columns and rows

  • grid-auto-flow: determine how the cell are located.
  • if there are more rows than you set on the grid template, the remains will locate below without height.
  • You may need grid-auto-rows: when you specify the size of the row, remains will locate below with the height you set.
  • if the flow is columns, it plays a role in the same as flex-direction, which means remains will locate on the right side, not below.

minmax

  • you can define minimum & maximum size when the display of browser is shrunk or expanded.
  • e.g. grid-template-columns: repeat(5, minmax(100px, 1fr));

auto-fit & auto-fill

  • they are good values for the responsive design with only repeat function.
  1. auto-fill: it fills empty spaces with new empty cells. (size is fixed, cells are growing)
  2. auto-fit: it fills empty spaces with existing elements.(growing elements’ size depending on browser size)
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
min-content & max-content
  • it designs how contents look like.
  • max-content: maximum width or height of the content. (it might cause the overflow.)
  • min-content: minimum width of the content. (the content might be as small as the longest word.)
  • collaborates with repeat() and minmax.

Review (Korean)

  • CSS-Grid 를 사용하면 Flexbox 와 다르게 rows 와 columns 방향으로 쉽게 요소들을 배치 할 수 있음.
  • grid-columns-start: 혼자 쓰일 때, 정확히 하나의 컬럼의 위치에 위치 시킬 수 있음.
  • grid-columns-end: 와 같이 쓰이면 확장 가능.
/* 1번째 라인부터 4번째 라인까지 */
grid-column-start: 1;
grid-column-end: 4;
  • 뒤에서 앞으로 갈 수도 있음.
/* 5번째 라인부터 2번째 라인까지 */
  grid-column-start: 5;
  grid-column-end: 2;
  • -1 이 마지막 뒤 컬럼 라인 (맨 오른쪽 라인).

  • grid-column-start: -3 (맨 오른쪽에서 3번째 칸)

  • span: 칸의 갯수.
  • 음수로 표현 안됨.
  • start-point 와 end-point 관계 있어야 함.
grid-column-start: 2;
grid-column-end: span 2;

/* shortcut */
grid-column: 2 / 4;
grid-row: 2 / 4;
  • More short-hand
grid-area: grid-row-start, grid-column-start, grid-row-end, grid-column-end;
  • multiple items 에 대해서는 Overlap 가능
#element-1 {
  grid-area: 1 / 4 / 6 / 5;
}

#element-2 {
grid-area: 2 / 3 / 5 / -1;
}