My CSS Notes

25.09.2023 — css — 2 min read

Resources

CSS Zen Garden

Basic formatting

Use color and value like white

h1 {
	background-color: #2a5599;
  color: white;
  padding: 5px;
}

Add b black border of 1px around all SVGs elements

svg {
	border: 1px solid black;
}

Show <div />s side by side

.mainView {
  display: flex;
}
.mainView {
  flex: 1;
}

<div class="mainView">
  <div>
    <h2>Airlines</h2>
    <svg id="airlinesChart"></svg>
  </div>
  <div>
    <h2>Airports</h2>
    <svg id="map"></svg>
  </div>
</div>

Make it bold

font-weight: bold

grid template columns

The CSS property grid-template-columns is used within the CSS Grid Layout, which is a powerful two-dimensional layout system designed to handle both rows and columns.

grid-template-columns defines the columns of a grid container and specifies the widths of the columns.

Here are some basics of how to use it:

Fixed-Size Columns:

You can set each column to a fixed size.

.grid-container {
    display: grid;
    grid-template-columns: 100px 200px 300px;
}

This will create a grid with three columns where the first column is 100 pixels wide, the second is 200 pixels, and the third is 300 pixels.

Fractional Units:

You can use the fr unit, which represents a fraction of the available space.

cssCopy code
.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

In this example, the grid has two columns. The first column will occupy 1/3 (or 33.33%) of the space, and the second column will occupy 2/3 (or 66.66%).

Repeat Function:

If you want to create multiple columns of the same size, you can use the repeat() function.

This will create a grid with three columns, each occupying an equal portion of the space.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

Auto-fill and Auto-fit:

You can create as many columns as can fit in the container using auto-fill or auto-fit.

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

This will create columns with a minimum width of 100 pixels and as many columns as can fit inside the container.

Using Different Units:

You can use different units like px, %, em, etc., within the same grid.

.grid-container {
    display: grid;
    grid-template-columns: 15% 1fr 200px;
}

Grid Lines

The lines separating the columns (and rows) in a grid are referred to as grid lines. They start at 1 from the left (for LTR languages) and can be used for positioning grid items.

Responsive Grids:

You can also combine grid-template-columns with media queries to create responsive grid layouts that adjust based on viewport sizes.

The grid-template-columns property provides a powerful way to control the layout of items in a grid container. With practice, you can create complex layouts with ease using this property.

Get window width and height

You can use window.innerWidth and window.innerHeight