{"id":2200,"date":"2026-09-27T15:58:16","date_gmt":"2026-09-27T15:58:16","guid":{"rendered":"https:\/\/appliedartand.design\/lj\/?p=2200"},"modified":"2026-09-27T15:58:16","modified_gmt":"2026-09-27T15:58:16","slug":"flexbox-and-grid","status":"publish","type":"post","link":"https:\/\/appliedartand.design\/lj\/2026\/09\/27\/flexbox-and-grid\/","title":{"rendered":"Flexbox and Grid"},"content":{"rendered":"\n

This week, I learned more about using Flexbox and Grid to create layouts with CSS. At first, there were many different properties to remember, and some of them were confusing. After practicing them in different layouts, I started to understand how they work together and how each property can change the position and spacing of elements.<\/p>\n\n\n\n\n\n\n\n

\n

With Flexbox, I learned how to use display: flex<\/code>, flex-wrap<\/code>, flex-direction<\/code>, justify-content<\/code>, align-items<\/code>, and gap<\/code>. I also practiced properties such as flex: 1<\/code>, flex-grow<\/code>, and margin: auto<\/code>. These properties helped me understand how to arrange items in rows and columns, make items share available space, and control the spacing between different elements. I especially liked being able to change the direction and alignment of the items and immediately see the difference on the page.<\/p>\n<\/div>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

I also learned about CSS Grid. Grid was helpful for creating layouts with both rows and columns. I practiced display: grid<\/code>, grid-template-columns<\/code>, grid-template-rows<\/code>, grid-column<\/code>, grid-row<\/code>, gap<\/code>, grid-template-areas<\/code>, grid-area<\/code>, repeat()<\/code>, and 1fr<\/code>. Using grid-template-areas<\/code> helped me understand how I can plan a page layout by giving different sections names and placing them where I want them. The repeat()<\/code> function also made it easier to create multiple columns without writing the same code many times.<\/p>\n\n\n\n

One thing I noticed is that Flexbox feels more natural when I need to arrange items in one direction, such as a navigation menu or a row of cards. Grid is useful when I need more control over both rows and columns, especially for larger page layouts. I am starting to understand that Flexbox and Grid are not really competing with each other. They can be used together depending on what I am trying to create.<\/p>\n\n\n\n

I also noticed that small changes in the CSS can make a big difference in the layout. For example, changing justify-content<\/code> or align-items<\/code> can quickly move elements to different positions. With Grid, changing the number of columns or using different grid-column<\/code> and grid-row<\/code> values can completely change the structure of the page. Seeing these changes directly in the browser has been very helpful for me.<\/p>\n\n\n\n

I still need more practice remembering all the properties and knowing which one to use without looking at my notes. Sometimes I understand what I want the layout to look like, but I am not sure which CSS property will create that result. However, I feel more comfortable with Flexbox and Grid than I did before. I think practicing by changing the CSS, experimenting with different values, and immediately seeing the result is helping me learn the most. I also think that with more practice, I will be able to choose between Flexbox and Grid more easily when creating my own web pages.<\/p>\n","protected":false},"excerpt":{"rendered":"

This week, I learned more about using Flexbox and Grid to create layouts with CSS. At first, there were many different properties to remember, and some of them were confusing. After practicing them in different layouts, I started to understand how they work together and how each property can change the position and spacing of … Continue reading “Flexbox and Grid”<\/span><\/a><\/p>\n","protected":false},"author":111,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[283],"tags":[],"class_list":["post-2200","post","type-post","status-publish","format-standard","hentry","category-aad-086-fa26"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/users\/111"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=2200"}],"version-history":[{"count":1,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2200\/revisions"}],"predecessor-version":[{"id":2202,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2200\/revisions\/2202"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=2200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=2200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=2200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}