|
715 | 715 | "cell_type": "markdown",
|
716 | 716 | "metadata": {},
|
717 | 717 | "source": [
|
718 |
| - "**Four buttons in a box revisted: Change order and orientation**\n", |
| 718 | + "**Four buttons in a box revisited: Change order and orientation**\n", |
719 | 719 | "\n",
|
720 | 720 | "This example, from earlier in this notebook, lays out 4 buttons vertically.\n",
|
721 | 721 | "\n",
|
|
755 | 755 | "cell_type": "markdown",
|
756 | 756 | "metadata": {},
|
757 | 757 | "source": [
|
758 |
| - "**Carousel revisted: item layout**\n", |
| 758 | + "**Carousel revisited: item layout**\n", |
759 | 759 | "\n",
|
760 | 760 | "The code that generated the carousel is reproduced below. Run the cell, then continue reading."
|
761 | 761 | ]
|
|
817 | 817 | "\n",
|
818 | 818 | "### Basics\n",
|
819 | 819 | "\n",
|
820 |
| - "To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-rows, grid-template-columns, and grid_template_areas, and then place its child elements into the grid with grid-column and grid-row. Similarly to flexbox, the source order of the grid items doesn't matter. Your CSS can place them in any order, which makes it super easy to rearrange your grid with media queries. Imagine defining the layout of your entire page, and then completely rearranging it to accommodate a different screen width all with only a couple lines of CSS. Grid is one of the most powerful CSS modules ever introduced.\n", |
| 820 | + "To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-rows, grid-template-columns, and grid_template_areas, and then place its child elements into the grid with grid-column and grid-row. Similar to flexbox, the source order of the grid items doesn't matter. Your CSS can place them in any order, which makes it super easy to rearrange your grid with media queries. Imagine defining the layout of your entire page, and then completely rearranging it to accommodate a different screen width all with only a couple lines of CSS. Grid is one of the most powerful CSS modules ever introduced.\n", |
821 | 821 | "\n",
|
822 | 822 | "### Important terminology\n",
|
823 | 823 | "\n",
|
824 |
| - "Before diving into the concepts of Grid it's important to understand the terminology. Since the terms involved here are all kinda conceptually similar, it's easy to confuse them with one another if you don't first memorize their meanings defined by the Grid specification. But don't worry, there aren't many of them.\n", |
| 824 | + "Before diving into the concepts of Grid it's important to understand the terminology. Since the terms involved here are all kind of conceptually similar, it's easy to confuse them with one another if you don't first memorize their meanings defined by the Grid specification. But don't worry, there aren't many of them.\n", |
825 | 825 | "\n",
|
826 | 826 | "**Grid Container**\n",
|
827 | 827 | "\n",
|
|
934 | 934 | "cell_type": "markdown",
|
935 | 935 | "metadata": {},
|
936 | 936 | "source": [
|
937 |
| - "If you don't define a widget for some of the slots, the layout will automatically re-configure itself by merging neighbouring cells" |
| 937 | + "If you don't define a widget for some of the slots, the layout will automatically re-configure itself by merging neighboring cells" |
938 | 938 | ]
|
939 | 939 | },
|
940 | 940 | {
|
|
1096 | 1096 | "cell_type": "markdown",
|
1097 | 1097 | "metadata": {},
|
1098 | 1098 | "source": [
|
1099 |
| - "`AppLayout` is a widget layout template that allows you to create an application-like widget arrangements. It consist of a header, a footer, two sidebars and a central pane:" |
| 1099 | + "`AppLayout` is a widget layout template that allows you to create an application-like widget arrangements. It consists of a header, a footer, two sidebars and a central pane:" |
1100 | 1100 | ]
|
1101 | 1101 | },
|
1102 | 1102 | {
|
|
0 commit comments