【My Study Note】CSS grids
CSS grids
When someone says the word grid, you probably think of lines that cross each other to form squares or rectangles.
CSS Grids are two-dimensional design layouts that are responsive and compatible with browser variations. They are an alternative to other options such as Flexboxes and tables, especially when you are working with larger-scale layouts.
Columns are the vertical tracks, and rows are the horizontal tracks in your viewport. Grids divide the page into rows and columns, and the space between these tracks is called gutters or gaps. A cell is a space in a grid container where a row and column intersect.
There are several different configurations you can add to define and modify grids. Let’s start adding content to the CSS file. The first thing to do is set the values for the properties of the different box classes inside the container object to make the layout look more presentable. The letters now have a better visual design, but their arrangement on screen is unchanged. The result is that each letter occupies more screen space than is necessary for its size.
grid frameworks
There are a number of commonly used grid frameworks and layouts.
Two such grid design layouts are known as the 12 and 16-column grids. They divide the page into 12 and 16 tracks respectively, along the vertical columns.
The properties can be modified accordingly to target a specific track.
Codes
inline-grid
display: inline-grid
grid-template-columns
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}The grid-template-columns property specifies the number (and the widths) of columns in a grid layout. The values are a space separated list, where each value specifies the size of the respective column.
grid-template-rows
.grid-container {
display: grid;
grid-template-rows: 100px 300px;
}The grid-template-rows property specifies the number (and the heights) of the rows in a grid layout. The values are a space-separated list, where each value specifies the height of the respective row.
Rowはこんな感じ (行ごとにページを割っていく)
Fr (Useful with Grid)
grid-template-rows: 2fr 1fr;「ｆｒ」単位とは「fraction(比率)」のことで、親要素から見た子要素の大きさを割合で指定することができます。 「px」で幅を指定してしまうとその幅で固定されてしまうので、画面の幅に合わせて自動で伸縮させるなら「fr」単位を使うと便利です
grid-gap
.grid-container {
grid-gap: 50px;
}The grid-gap property defines the size of the gap between the rows and columns in a grid layout, and is a shorthand property for the following properties.
grid-auto-rows
.grid-container {
display: grid;
grid-auto-rows: 150px;
}The grid-auto-rows property sets a size for the rows in a grid container. This property affects only rows with the size not set.
Repeat Fucntion (So useful)
grid-template-columns: repeat(3, 100px);Minmax Function (So useful)
grid-auto-rows: minmax(150px, auto);place-items
// 縦がstartだから上で、横はendだから右
place-items: start end縦横それぞれ、どこに配置するのかを指定。もし、１個しか指定しなかったら、たてもよこもそれが適応される。
Useful Links (Japanese)
grid-column
// Make "item1" start on column 1 and span 2 columns
.item1 {
grid-column: 1 / span 2;
}The grid-column property specifies a grid item’s size and location in a grid layout, and is a shorthand property for the following properties:
grid-template-areas
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas: "myArea myArea . . .";
}The grid-template-areas property specifies areas within the grid layout. You can name grid items by using the grid-area property, and then reference to the name in the grid-template-areas property.
Example of using grid
body {
display: grid;
height: 200px;
grid-template-areas: "head head"
"nav main"
"footer footer";
grid-template-rows: 30px 1fr 30px;
grid-template-columns: 150px 1fr;
}
header {
grid-area: head;
background-color: lightsalmon;
}
.nav-bar {
grid-area: nav;
background-color: lightblue;
}
main {
grid-area: main;
background-color: lightyellow;
}
footer {
grid-area: footer;
background-color: firebrick;
}