{"id":219925,"date":"2020-09-28T00:00:00","date_gmt":"2020-09-27T22:00:00","guid":{"rendered":"https:\/\/blog.lewagon.com\/nao-categorizado\/css-grid-ou-flexbox\/"},"modified":"2023-09-01T19:13:56","modified_gmt":"2023-09-01T17:13:56","slug":"css-grid-ou-flexbox","status":"publish","type":"post","link":"https:\/\/blog.lewagon.com\/pt-br\/skills\/css-grid-ou-flexbox\/","title":{"rendered":"Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"<p>As vezes \u00e9 bem dif\u00edcil decidir entre CSS Grid e Flexbox na hora de criar o seu layout, nesse artigo voc\u00ea vai entender as particularidades de cada tipo de layout e quais casos em que cada um deles \u00e9 mais adequado.<\/p>\n","protected":false},"author":1,"featured_media":219926,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[146],"type_de_post":[],"post-format":[179],"class_list":["post-219925","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-skills","tag-web-pt-br","post-format-post-pt-br"],"acf":[],"acfml_non_translatable_locations":null,"_wp_attached_file":null,"_wp_attachment_metadata":null,"wpml_media_processed":null,"_elementor_inline_svg":null,"_elementor_source_image_hash":null,"_wp_attachment_image_alt":null,"_msc":null,"_elementor_is_screenshot":null,"_wp_attachment_context":null,"_oembed_4f1dc266c1e5b199d2e3668569863d35":null,"_wp_attachment_backup_sizes":null,"description_courte_du_cours":null,"_description_courte_du_cours":null,"sujets":null,"_sujets":null,"niveau":null,"_niveau":null,"duree":null,"_duree":null,"lien_externe_du_cours":null,"_lien_externe_du_cours":null,"_g_feedback_shortcode_8e54bebc0966bf7f9290fee5ef5e57c8a8c597c6":null,"_g_feedback_shortcode_atts_8e54bebc0966bf7f9290fee5ef5e57c8a8c597c6":null,"elementor_font_files":null,"elementor_font_face":null,"_elementor_location":null,"_elementor_priority":null,"_elementor_code":null,"_elementor_extra_options":null,"date_de_levent":null,"_date_de_levent":null,"heure_de_debut_de_levent":null,"_heure_de_debut_de_levent":null,"heure_de_fin_de_levent":null,"_heure_de_fin_de_levent":null,"time_zone":null,"_time_zone":null,"description_de_levent":null,"_description_de_levent":null,"format_du_cours":null,"_format_du_cours":null,"pre-requis":null,"_pre-requis":null,"langue_de_levent":null,"_langue_de_levent":null,"lien_externe_de_levent":null,"_lien_externe_de_levent":null,"_yoast_wpseo_primary_tag_events":null,"lieu_de_levent":null,"_lieu_de_levent":null,"_menu_item_type":null,"_menu_item_menu_item_parent":null,"_menu_item_object_id":null,"_menu_item_object":null,"_menu_item_target":null,"_menu_item_classes":null,"_menu_item_xfn":null,"_menu_item_url":null,"_omapi_type":null,"_omapi_ids":null,"_omapi_enabled":null,"_yoast_wpseo_content_score":null,"_pll_strings_translations":null,"_yoast_wpseo_primary_post_tag":"","_yoast_wpseo_primary_type_de_post":"","_yoast_wpseo_primary_post-format":"","_oembed_e607e81f61090d85eabdabc743a27470":null,"_oembed_196c62ccee9fda191cd6fa5f568ddc05":null,"_oembed_6b5f28c0de48cbf3a2ad766be5eb3b30":null,"_oembed_082c4292f4cd0dedc40ae746a899501c":null,"om_disable_all_campaigns":null,"wpil_sync_report3":"1","_yoast_wpseo_focuskw":null,"_yoast_wpseo_linkdex":null,"_yoast_wpseo_opengraph-title":"Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend | Le Wagon","_yoast_wpseo_opengraph-description":"As vezes \u00e9 bem dif\u00edcil decidir entre CSS Grid e Flexbox na hora de criar o seu layout, nesse artigo voc\u00ea vai entender as particularidades de cada tipo de layout e quais casos em que cada um deles \u00e9 mais adequado.","_yoast_wpseo_twitter-title":"Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend | Le Wagon","_yoast_wpseo_twitter-description":"As vezes \u00e9 bem dif\u00edcil decidir entre CSS Grid e Flexbox na hora de criar o seu layout, nesse artigo voc\u00ea vai entender as particularidades de cada tipo de layout e quais casos em que cada um deles \u00e9 mais adequado.","wpil_links_inbound_internal_count":"0","wpil_links_inbound_internal_count_data":[],"wpil_links_outbound_internal_count":"0","wpil_links_outbound_internal_count_data":[],"wpil_links_outbound_external_count":"0","wpil_links_outbound_external_count_data":[],"wpil_sync_report2_time":"2023-08-11T09:31:53+00:00","gnpub_modified_count":"1","_encloseme":"1","_jetpack_memberships_contains_paid_content":null,"_oembed_df252bc3f21e94e550790f0a26013d33":null,"_oembed_7c25793225e5877909b9566a95c01f07":null,"_oembed_time_7c25793225e5877909b9566a95c01f07":null,"_oembed_c035311b2d37111892bc6336ad75c1a7":null,"_oembed_time_c035311b2d37111892bc6336ad75c1a7":null,"_yoast_wpseo_focuskw_text_input":"","_yoast_wpseo_opengraph-image":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/swhyqzyqmd9u53pcj6razvkvych1.jpeg","_yoast_wpseo_twitter-image":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/swhyqzyqmd9u53pcj6razvkvych1.jpeg","_bnitk_mfd_meta-robots-noindex":null,"_yoast_wpseo_meta-robots-noindex":null,"_bnitk_mfd_meta-robots-nofollow":null,"_yoast_wpseo_meta-robots-nofollow":null,"_oembed_9b38dff8e9475b390d223d1a13735d6e":null,"_oembed_09b03dce1da57707d8b400d6ead6cfea":null,"_oembed_time_09b03dce1da57707d8b400d6ead6cfea":null,"_oembed_761875ecd5d7c814e779a8a1669e3078":null,"_oembed_time_761875ecd5d7c814e779a8a1669e3078":null,"_oembed_60128998417fdcbaac97a635f5785efd":null,"_oembed_time_60128998417fdcbaac97a635f5785efd":null,"_oembed_bbc2c908fc7e611d82dce88119dc4350":null,"_oembed_time_bbc2c908fc7e611d82dce88119dc4350":null,"_oembed_5ada75a4373349f7b136423290505b3a":null,"_oembed_time_5ada75a4373349f7b136423290505b3a":null,"_oembed_086373a651e90a4eb1279fa1f945472c":null,"_oembed_time_086373a651e90a4eb1279fa1f945472c":null,"_wpml_post_translation_editor_native":null,"_oembed_5e24c29ce369f6b80c9eeec04f14665b":null,"_oembed_time_5e24c29ce369f6b80c9eeec04f14665b":null,"_oembed_8c3e7085f10b7c0fc5520e72277d797b":null,"_oembed_time_8c3e7085f10b7c0fc5520e72277d797b":null,"_oembed_1489782c3c8ef26605b6876b88f7bdda":null,"_oembed_time_1489782c3c8ef26605b6876b88f7bdda":null,"_oembed_0a3d659fc8de333aa903ab0b56018d23":null,"_oembed_time_0a3d659fc8de333aa903ab0b56018d23":null,"_oembed_d1585e059963c7dbe1909a198f64637b":null,"_oembed_da273c5e4d4993b38963204fa3018b68":null,"_oembed_time_da273c5e4d4993b38963204fa3018b68":null,"_oembed_a5e2c70342e4f17e48253b0a60b76258":null,"_oembed_time_a5e2c70342e4f17e48253b0a60b76258":null,"_oembed_83c8f84c43191797360817ecdc633650":null,"_oembed_time_83c8f84c43191797360817ecdc633650":null,"_oembed_e105b3463a1e23321ff3d1a9daf4ce77":null,"_oembed_1692f2329443bc1b18fc320e0d77cb4e":null,"_yoast_wpseo_schema_article_type":null,"_oembed_02bf1d274545a46fdad44828db802e9b":null,"_oembed_483efee027379bb1099137e135e60619":null,"_oembed_time_483efee027379bb1099137e135e60619":null,"_oembed_d9e3a2e55472c308a6d4f95f9859d57c":null,"_oembed_time_d9e3a2e55472c308a6d4f95f9859d57c":null,"_oembed_14a773041d4083fdc540105ccc635e1f":null,"_oembed_time_14a773041d4083fdc540105ccc635e1f":null,"_oembed_fd2c0295b311b878f43def139f693291":null,"_oembed_time_fd2c0295b311b878f43def139f693291":null,"_oembed_9e88339a75e081aa4aa002ac43b5917e":null,"_oembed_time_9e88339a75e081aa4aa002ac43b5917e":null,"_oembed_e58b2264fd34411178c5aead6e76fc0e":null,"_oembed_time_e58b2264fd34411178c5aead6e76fc0e":null,"_oembed_bddf29494cd341c273d2f25802785f3a":null,"_oembed_time_bddf29494cd341c273d2f25802785f3a":null,"_oembed_9fdc7ffbd7d1c456cb57323136bcf86d":null,"_oembed_time_9fdc7ffbd7d1c456cb57323136bcf86d":null,"_oembed_6882adf1f7ba34c40d8abda49c078862":null,"_oembed_time_6882adf1f7ba34c40d8abda49c078862":null,"_oembed_42ae0b6a999f98ed81c86edf9b80d360":null,"_oembed_time_42ae0b6a999f98ed81c86edf9b80d360":null,"_oembed_f4dcff6ba8f84f09cade790420ba4d80":null,"_oembed_time_f4dcff6ba8f84f09cade790420ba4d80":null,"_oembed_25071af9d5ecd73a9356fe5704bba4d8":null,"_oembed_time_25071af9d5ecd73a9356fe5704bba4d8":null,"_oembed_a86728f5efc0ca0642006bbb96f843cc":null,"_oembed_time_a86728f5efc0ca0642006bbb96f843cc":null,"_oembed_d7b5055b785ef8a0cf22c87d024bf2a4":null,"_oembed_time_d7b5055b785ef8a0cf22c87d024bf2a4":null,"_oembed_6a73e101cae7c3452b00a72cf0fc9b22":null,"_oembed_time_6a73e101cae7c3452b00a72cf0fc9b22":null,"_oembed_0aef478f0830cc2e857b9a150a7f763a":null,"_oembed_time_0aef478f0830cc2e857b9a150a7f763a":null,"_oembed_d1a3bdcdf10e4859560b01d910ad1120":null,"_oembed_time_d1a3bdcdf10e4859560b01d910ad1120":null,"_oembed_05ef2af36a31586761b7311d393d1df4":null,"_oembed_time_05ef2af36a31586761b7311d393d1df4":null,"_oembed_ed00fe1690bb2e86f1eb06acfe8a13e7":null,"_oembed_time_ed00fe1690bb2e86f1eb06acfe8a13e7":null,"_oembed_59ffcbf71f633752ca4f26b3b4a544c9":null,"_oembed_time_59ffcbf71f633752ca4f26b3b4a544c9":null,"_oembed_a7b688611478922544f14672fda18461":null,"_oembed_time_a7b688611478922544f14672fda18461":null,"_oembed_266f9a151e3a09eeee918af2d28fd24f":null,"_oembed_time_266f9a151e3a09eeee918af2d28fd24f":null,"_oembed_9f52726dd229470e47d40ff0c8aeb5f8":null,"_oembed_time_9f52726dd229470e47d40ff0c8aeb5f8":null,"_oembed_5547f713058fed19783e0533ce393a31":null,"_oembed_time_5547f713058fed19783e0533ce393a31":null,"_oembed_68ff8dd20e77e109ad084c2252ca040d":null,"_oembed_time_68ff8dd20e77e109ad084c2252ca040d":null,"_oembed_819f09a569080db91bf5dadda0a30d9f":null,"_oembed_time_819f09a569080db91bf5dadda0a30d9f":null,"_oembed_4fc081fbdf0afd05a624ba852a63e133":null,"_oembed_time_4fc081fbdf0afd05a624ba852a63e133":null,"_oembed_d66baf1301b99db8b19a0924319cf03e":null,"_oembed_time_d66baf1301b99db8b19a0924319cf03e":null,"_oembed_14a5f80e3eef4903e482b0ef3799659e":null,"_oembed_time_14a5f80e3eef4903e482b0ef3799659e":null,"_oembed_c24c715adb3853482526a794a5f3c3bb":null,"_oembed_time_c24c715adb3853482526a794a5f3c3bb":null,"_oembed_9c493e098be2852715cc990b6e6243f3":null,"_oembed_time_9c493e098be2852715cc990b6e6243f3":null,"_oembed_b60b7e3028d326711916099f54e986fa":null,"_oembed_time_b60b7e3028d326711916099f54e986fa":null,"_oembed_5283e19fcec44e632de8d436d46ec2f7":null,"_oembed_time_5283e19fcec44e632de8d436d46ec2f7":null,"_oembed_057692cb4479cf5c77363896a28db44f":null,"_oembed_time_057692cb4479cf5c77363896a28db44f":null,"_oembed_e8cb0f41d141fe5eb9d69fc32a98cd72":null,"_oembed_time_e8cb0f41d141fe5eb9d69fc32a98cd72":null,"_oembed_75dcbca80ec1829a77578390fae8fa56":null,"_oembed_time_75dcbca80ec1829a77578390fae8fa56":null,"_oembed_e49318dfeabd5f16d7967e2fcc746fbd":null,"_oembed_time_e49318dfeabd5f16d7967e2fcc746fbd":null,"_oembed_76116b03fe5a013341210d278021184b":null,"_oembed_time_76116b03fe5a013341210d278021184b":null,"_oembed_6c81e1c9b634b5066fb37aaccfd71053":null,"_oembed_time_6c81e1c9b634b5066fb37aaccfd71053":null,"_oembed_abbc1aa97e554f334c2ce25f0d883702":null,"_oembed_time_abbc1aa97e554f334c2ce25f0d883702":null,"_oembed_ba421363b36dd97c087665d5025396cf":null,"_oembed_time_ba421363b36dd97c087665d5025396cf":null,"_oembed_a98f236eb48eb9cd4ede7f319e9cfbc7":null,"_oembed_time_a98f236eb48eb9cd4ede7f319e9cfbc7":null,"_oembed_d61fec7d73397687995fec8d7bd9852f":null,"_oembed_time_d61fec7d73397687995fec8d7bd9852f":null,"_oembed_2e9e46a0176fe90e49cc5fff32ac6912":null,"_oembed_time_2e9e46a0176fe90e49cc5fff32ac6912":null,"_oembed_8a304f49b3aa1c3eec8d0b0577e05e3d":null,"_oembed_time_8a304f49b3aa1c3eec8d0b0577e05e3d":null,"_oembed_ad30824ca1e37cffdad2dbce46c4998a":null,"_oembed_time_ad30824ca1e37cffdad2dbce46c4998a":null,"_oembed_6c3dacc8273d4877c65378c1f324c9cc":null,"_oembed_time_6c3dacc8273d4877c65378c1f324c9cc":null,"_oembed_1d0e7d3c6d826ca1e56a24218abba6f2":null,"_oembed_time_1d0e7d3c6d826ca1e56a24218abba6f2":null,"_oembed_50929cd1300f7cdee57e6e5451afb186":null,"_oembed_time_50929cd1300f7cdee57e6e5451afb186":null,"_oembed_72dc139d079681a2c3d759a86af48ccc":null,"_oembed_time_72dc139d079681a2c3d759a86af48ccc":null,"_oembed_d359fdb1fa5da9e62dd3505937f46fb6":null,"_oembed_time_d359fdb1fa5da9e62dd3505937f46fb6":null,"_oembed_589d6065ccac39334963be5bd8656631":null,"_oembed_time_589d6065ccac39334963be5bd8656631":null,"_oembed_715be02b6ebadc1be6dd638a57d01eb7":null,"_oembed_time_715be02b6ebadc1be6dd638a57d01eb7":null,"_oembed_f5139a9df267d3aa532f5b56409c90b0":null,"_oembed_time_f5139a9df267d3aa532f5b56409c90b0":null,"_oembed_3d9a26be229b27005ca74596fb62cc08":null,"_oembed_time_3d9a26be229b27005ca74596fb62cc08":null,"_oembed_a7d6f0ce79de685fc6f7f4d447e15468":null,"_oembed_time_a7d6f0ce79de685fc6f7f4d447e15468":null,"_oembed_20849479e832b5312335e3086c5f972b":null,"_oembed_time_20849479e832b5312335e3086c5f972b":null,"_oembed_2be4d392f66846deb7624c1bf3bc293e":null,"_oembed_time_2be4d392f66846deb7624c1bf3bc293e":null,"_oembed_9bcf546ec292041d23df28a719840688":null,"_oembed_time_9bcf546ec292041d23df28a719840688":null,"_oembed_0858ffd7404bcd7d82896f942481fe63":null,"_oembed_time_0858ffd7404bcd7d82896f942481fe63":null,"_oembed_4a2dd0ecf082a7c7d82731c06a644799":null,"_oembed_time_4a2dd0ecf082a7c7d82731c06a644799":null,"_oembed_8a1e46bc730cb21c1085d157ae6fa8b6":null,"_oembed_time_8a1e46bc730cb21c1085d157ae6fa8b6":null,"_oembed_cae7deb931d75f809e459e912e71429a":null,"_oembed_time_cae7deb931d75f809e459e912e71429a":null,"_oembed_6fcb4f8ab72abccda75674f71a946f97":null,"_oembed_time_6fcb4f8ab72abccda75674f71a946f97":null,"_oembed_7f0bfd584f844117a64fe73d83b43245":null,"_oembed_time_7f0bfd584f844117a64fe73d83b43245":null,"_oembed_d0aea105cffdf6e004979cf1e4f51e96":null,"_oembed_time_d0aea105cffdf6e004979cf1e4f51e96":null,"_oembed_e53b85b8766b3dc91338f6c1b95a2541":null,"_oembed_time_e53b85b8766b3dc91338f6c1b95a2541":null,"_oembed_48832be87b763046d232c1f2b5ac5fb3":null,"_oembed_time_48832be87b763046d232c1f2b5ac5fb3":null,"_oembed_32a9a34fcf91c466be9a08e1dba3c84e":null,"_oembed_time_32a9a34fcf91c466be9a08e1dba3c84e":null,"_oembed_fb50b2dc07acfa2418f00cdc2ad4c4c2":null,"_oembed_time_fb50b2dc07acfa2418f00cdc2ad4c4c2":null,"_oembed_3089e1d62f944a73b38c996e49abd2fc":null,"_oembed_time_3089e1d62f944a73b38c996e49abd2fc":null,"_oembed_1ecc99e75cf5d001c8da4f4d600703a8":null,"_oembed_time_1ecc99e75cf5d001c8da4f4d600703a8":null,"_oembed_b9c03ca24b382c17966861d251dc3b8d":null,"_oembed_time_b9c03ca24b382c17966861d251dc3b8d":null,"_wp_trash_meta_status":null,"_wp_trash_meta_time":null,"_wp_desired_post_slug":null,"_oembed_031755ba22f2b639d88c78254a99ff39":null,"_oembed_time_031755ba22f2b639d88c78254a99ff39":null,"description_de_la_ressource":null,"_description_de_la_ressource":null,"titre_du_fichier":null,"_titre_du_fichier":null,"_edit_last":"31","_edit_lock":"1693588300:31","_wp_old_slug":null,"_top_nav_excluded":null,"_cms_nav_minihome":null,"inline_featured_image":null,"_yoast_wpseo_estimated-reading-time-minutes":"0","_yoast_wpseo_wordproof_timestamp":"","_wpml_media_duplicate":"1","_thumbnail_id":"219926","_wpml_media_featured":"1","_wpml_word_count":"{\"total\":1382,\"to_translate\":{\"en\":1382,\"fr\":1382,\"de\":1382,\"ja\":1382,\"es\":1382}}","_last_translation_edit_mode":null,"_last_editor_used_jetpack":"classic-editor","_elementor_edit_mode":null,"_elementor_template_type":null,"_wp_page_template":"default","_elementor_page_settings":null,"_elementor_data":null,"_elementor_page_assets":[],"_elementor_version":null,"_elementor_pro_version":null,"_elementor_elements_default_values":null,"_elementor_css":null,"_elementor_source":null,"_elementor_conditions":null,"_wpml_location_migration_done":null,"_elementor_controls_usage":null,"_elementor_screenshot_failed":null,"_elementor_screenshot":null,"_elementor_popup_display_settings":null,"_yoast_wpseo_primary_category":"","_wp_old_date":null,"_elementor_template_widget_type":null,"_icl_lang_duplicate_of":null,"_yoast_wpseo_metadesc":"As vezes \u00e9 bem dif\u00edcil decidir entre CSS Grid e Flexbox na hora de criar o seu layout, nesse artigo voc\u00ea vai entender as particularidades de cada tipo de layout e quais casos em que cada um deles \u00e9 mais adequado.","_yoast_wpseo_title":"Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend | Le Wagon","contenu_de_larticle":"<h3>CSS Grid ou Flexbox? Quando eu utilizo cada um deles?<\/h3>\r\n<div><\/div>\r\n<div>J\u00e1 arrancou os cabelos tentando decidir se era mais correto usar Flexbox ou CSS Grid em um layout? Est\u00e1 cansade de usar as mesmas 3 propriedades flex pra absolutamente tudo dentro de um layout? Est\u00e1 quase largando toda essa parafern\u00e1lia pra fazer layouts CSS do jeito que ensinam na faculdade (com table)? Esse texto \u00e9 pra voc\u00ea.<\/div>\r\n<div><\/div>\r\n<h3>CSS Grid e Flexbox: Quais as diferen\u00e7as entre eles?<\/h3>\r\n<div><\/div>\r\n<div>Por ser mais simples, geralmente o flexbox \u00e9 o mais comumente utilizado. O que ele faz \u00e9 transformar o elemento em que ele foi aplicado em um container flex e os filhos desse elemento em flex items. O container flex tem como papel definir a posi\u00e7\u00e3o dos filhos, definir em qual dire\u00e7\u00e3o eles v\u00e3o se enfileirar (coluna ou linha) e caso uma linha de elementos atinja a altura ou largura total do container, se essa fila de elementos vai quebrar ou n\u00e3o (flex-wrap). Na pr\u00e1tica, o flexbox serve para criar layouts em uma dimens\u00e3o, ou seja, uma grande fila que pode ser ou uma coluna ou uma linha e quando e se ela vai quebrar linha ao atingir o tamanho do container.<\/div>\r\n<div><\/div>\r\n<div>O Grid por sua vez cria um layout bidirecional, voc\u00ea consegue definir a posi\u00e7\u00e3o dos elementos em linhas e colunas ao mesmo tempo. Enquanto o flexbox depende da aplica\u00e7\u00e3o de propriedades nos filhos para criar layouts com elementos de tamanhos diversos (flex-basis, flex-grow e flex-shrink), esses layouts complexos podem ser criados diretamente no container grid, pois os filhos (grid-items) se adaptam ao tamanho das suas grid-templates.<\/div>\r\n<div><\/div>\r\n<div>\r\n<figure class=\"attachment attachment--preview\" data-trix-attachment=\"{&quot;contentType&quot;:&quot;image&quot;,&quot;height&quot;:551,&quot;url&quot;:&quot;https:\/\/lh4.googleusercontent.com\/Wucgn35IfmbHv-n3ftV0xgg3gpb7Gohw-jvCLTcOx5r2Hgdvyf_un_bwDam84xSfYzMF0JAkQiIZ6tUjBYZ47Ct8pcRsu7KDlAyToXs4b8btKxKzKU5Tp7sTjMF6ToJcWQlNmvuu&quot;,&quot;width&quot;:1071}\" data-trix-content-type=\"image\" data-trix-attributes=\"{&quot;caption&quot;:&quot;css grid ou flexbox?&quot;}\"><img src=\"https:\/\/lh4.googleusercontent.com\/Wucgn35IfmbHv-n3ftV0xgg3gpb7Gohw-jvCLTcOx5r2Hgdvyf_un_bwDam84xSfYzMF0JAkQiIZ6tUjBYZ47Ct8pcRsu7KDlAyToXs4b8btKxKzKU5Tp7sTjMF6ToJcWQlNmvuu\" width=\"1071\" height=\"551\" \/><figcaption class=\"attachment__caption attachment__caption--edited\">css grid ou flexbox?<\/figcaption><\/figure>\r\n<\/div>\r\n<h3>CSS Grid ou Flexbox: Quando usar Grid?<\/h3>\r\n<div>Geralmente vemos o grid sendo utilizado para definir os layouts base de sites, s\u00e3o criadas grid-template-areas com nomes de \"navbar\", \"header\", etc e essas s\u00e3o aplicadas nas suas respectivas se\u00e7\u00f5es do site. O conceito de cria\u00e7\u00e3o de templates \u00e9 sobre isso - a delimita\u00e7\u00e3o de um layout em que elementos dever\u00e3o se encaixar nele, e n\u00e3o o contr\u00e1rio.<\/div>\r\n<div>\r\n<figure class=\"attachment attachment--preview\" data-trix-attachment=\"{&quot;contentType&quot;:&quot;image&quot;,&quot;height&quot;:561,&quot;url&quot;:&quot;https:\/\/lh4.googleusercontent.com\/5YSQEhV_tD8o54VRlxzuSuiZwDdjwL6GMKZ3WNU9UTgNLPqWgIiBwk6y2FGS7KP9_mfwFBzmp5qv6n22AUbzpyq242G9kHIs-CSImzKBF1YMtvyPuv6okPeeCy6nnmZKCFwHZvu-&quot;,&quot;width&quot;:967}\" data-trix-content-type=\"image\" data-trix-attributes=\"{&quot;caption&quot;:&quot;CSS Grid&quot;}\"><img src=\"https:\/\/lh4.googleusercontent.com\/5YSQEhV_tD8o54VRlxzuSuiZwDdjwL6GMKZ3WNU9UTgNLPqWgIiBwk6y2FGS7KP9_mfwFBzmp5qv6n22AUbzpyq242G9kHIs-CSImzKBF1YMtvyPuv6okPeeCy6nnmZKCFwHZvu-\" width=\"967\" height=\"561\" \/><figcaption class=\"attachment__caption attachment__caption--edited\">CSS Grid<\/figcaption><\/figure>\r\n<\/div>\r\n<div>Esse \u00e9 um caso de uso muito bom por dois motivos:\r\n\r\n<\/div>\r\n<ul>\r\n \t<li>Ao criar media queries, ao inv\u00e9s de modificar cada item individualmente, voc\u00ea s\u00f3 precisa reajustar as grid-templates do container grid.<\/li>\r\n \t<li>Componentes e se\u00e7\u00f5es de p\u00e1gina costumam ter designs que cobrem m\u00faltiplas colunas e linhas, coisa que pra fazer com flex provavelmente fariam voc\u00ea gastar umas boas divs pra conseguir o mesmo resultado.<\/li>\r\n<\/ul>\r\n<div>Mas h\u00e1 casos em que a l\u00f3gica de grid se aplica dentro de componentes e se\u00e7\u00f5es tamb\u00e9m. Se no layout do seu componente voc\u00ea precisa aplicar diversas propriedades nos elementos filhos para eles se encaixarem no layout, voc\u00ea deveria usar grid. O flexbox foi pensado para que voc\u00ea possa enfileirar conte\u00fados de diversos tamanhos sem se preocupar se eles v\u00e3o quebrar o container de alguma forma (overflow), se voc\u00ea precisa aplicar propriedades espec\u00edficas em filhos para ter maior controle de layout e posicionamento, o grid tem muito mais a oferecer com um custo muito menor - controle direto no container.<\/div>\r\n<div><\/div>\r\n<div>Outra caracter\u00edstica do grid \u00e9 que \u00e9 poss\u00edvel sobrepor elementos em um mesmo local apenas designando eles para a mesma grid-area. A ordem de sobreposi\u00e7\u00e3o vai ser a mesma ordem em que esses elementos est\u00e3o no HTML, o ultimo por cima. O container grid tamb\u00e9m cria um container block, isso significa que se voc\u00ea posicionar um elemento absolutamente dentro de um container grid, esse elemento vai se comportar como se o container grid tivesse um position: relative.<\/div>\r\n<div><\/div>\r\n<div><strong>Resumindo\r\n<\/strong><\/div>\r\n<div>Se voc\u00ea est\u00e1 usando mais de um container flex para organizar elementos em um layout, provavelmente um deles deveria ser grid. Se voc\u00ea precisa aplicar diversas propriedades nos elementos filhos para ter maior controle do layout, voc\u00ea provavelmente deveria estar fazendo isso com grid. Se seu layout tem elementos diretos que ocupam tanto linhas quanto colunas, sempre use grid, e, por \u00faltimo, se voc\u00ea s\u00f3 quer que seus elementos se encaixem dentro de um layout, use grid.\r\n\r\n<\/div>\r\n<h3>CSS Grid ou Flexbox: Quando usar o Flexbox?<\/h3>\r\n<div>\r\n\r\nUse o flexbox de sem\u00e1foro. Sendo unidimensional o flexbox \u00e9 perfeito para tornar o posicionamento de itens um trabalho do container mais do que dos pr\u00f3prios itens, acabando de vez com a supremacia do inline-block ou dos floats. Em um container flex o seu layout vai ser controlado pelo tamanho e altura dos itens flex, sendo papel do container dizer qual a dire\u00e7\u00e3o que esses elementos v\u00e3o enfileirar e se eles v\u00e3o quebrar ao atingir as beiradas do container.\r\n<figure class=\"attachment attachment--preview\" data-trix-attachment=\"{&quot;contentType&quot;:&quot;image&quot;,&quot;height&quot;:584,&quot;url&quot;:&quot;https:\/\/lh4.googleusercontent.com\/ySCFqgOU-BpkT3z5lOa94ALDpKc_UbskaAAJV4AnN_Kl0zfs16oEhJGc6T_XqAQJREZJU_hOXm5YyZ8LFdK1uSXKzOvIi13c2uQ-JWMn_ogOPk36SQ-Qb0t3tGlyrMhraTxZ5jKP&quot;,&quot;width&quot;:1229}\" data-trix-content-type=\"image\" data-trix-attributes=\"{&quot;caption&quot;:&quot;CSS Flexbox&quot;}\"><img src=\"https:\/\/lh4.googleusercontent.com\/ySCFqgOU-BpkT3z5lOa94ALDpKc_UbskaAAJV4AnN_Kl0zfs16oEhJGc6T_XqAQJREZJU_hOXm5YyZ8LFdK1uSXKzOvIi13c2uQ-JWMn_ogOPk36SQ-Qb0t3tGlyrMhraTxZ5jKP\" width=\"1229\" height=\"584\" \/><figcaption class=\"attachment__caption attachment__caption--edited\">CSS Flexbox<\/figcaption><\/figure>\r\n<\/div>\r\n<div>Outra caracter\u00edstica do flex \u00e9 sua maneira de alinhar os flex-items. Propriedades como justify-content espa\u00e7am os itens do container de maneira proporcional independente do tamanho de cada flex-item e levando em considera\u00e7\u00e3o todas as propriedades que voc\u00ea aplicar no container, ou seja, o conte\u00fado que toma a maioria das decis\u00f5es de layout.<\/div>\r\n<div><\/div>\r\n<div><strong>Resumindo<\/strong><\/div>\r\n<div>Se alinhamento, espa\u00e7amento e dire\u00e7\u00e3o \u00e9 o m\u00e1ximo de controle que voc\u00ea precisa ter dos seus elementos, use flex. Se voc\u00ea precisa encaixar elementos dentro de um container da forma que eles s\u00e3o, sem se preocupar com o tamanho individual de cada elemento, flexbox.\r\n\r\n<\/div>\r\n<h3>CSS Grid ou Flexbox: Quando n\u00e3o usar nenhum dos dois?<\/h3>\r\n<div>\r\nSabe aquela bolinha de chat no canto inferior direito da p\u00e1gina? Esse e qualquer elemento que precisa estar em um lugar muito espec\u00edfico do site <strong>pedem<\/strong> para ser absolutamente posicionados. Se voc\u00ea tentar encaixar esse elemento dentro do fluxo do site utilizando grid ou flex voc\u00ea provavelmente vai gastar muito c\u00f3digo, principalmente quando for tornar o layout responsivo. Se voc\u00ea precisa controlar um elemento em espec\u00edfico em um layout, sempre se pergunte:<\/div>\r\n<div>\r\n<figure class=\"attachment attachment--preview\" data-trix-attachment=\"{&quot;contentType&quot;:&quot;image&quot;,&quot;height&quot;:431,&quot;url&quot;:&quot;https:\/\/lh6.googleusercontent.com\/i-fsCGviQS4KV0L_44lXGrtu_9TxFu1S4jKOHrW8l_A5a1cWCoFIRskPTb1SMGYgtTndfsBoDlrYRcx3WXWppWffIGlofSiowZNALfl9oglmtG6bS48sAperVHZG5F1oZ-IF4TW3&quot;,&quot;width&quot;:532}\" data-trix-content-type=\"image\" data-trix-attributes=\"{&quot;caption&quot;:&quot;CSS Position&quot;}\"><img src=\"https:\/\/lh6.googleusercontent.com\/i-fsCGviQS4KV0L_44lXGrtu_9TxFu1S4jKOHrW8l_A5a1cWCoFIRskPTb1SMGYgtTndfsBoDlrYRcx3WXWppWffIGlofSiowZNALfl9oglmtG6bS48sAperVHZG5F1oZ-IF4TW3\" width=\"532\" height=\"431\" \/><figcaption class=\"attachment__caption attachment__caption--edited\">CSS Position<\/figcaption><\/figure>\r\n<\/div>\r\n<div>Eu preciso muito mais divis\u00f5es no meu grid s\u00f3 pra posicionar esse elemento?<\/div>\r\n<div>Eu preciso criar diversos containers flex s\u00f3 pra posicionar esse elemento?<\/div>\r\n<div><\/div>\r\n<div>Se ambas as respostas forem sim, prefira usar outras formas de posicionar esse elemento no layout, sejam elas absolutas e que tiram o elemento do fluxo da p\u00e1gina (float e position) ou relativas dentro de um container pr\u00f3prio que pode ser relativamente posicionado, transformado ou possuir um display espec\u00edfico.<\/div>\r\n<div><\/div>\r\n<h3>CSS Grid ou Flexbox: Quando usar os dois?<\/h3>\r\n<div><\/div>\r\n<div>Sempre que puder, sempre lembrem que um grid-item pode ser tamb\u00e9m um flex-container e que um flex-item pode ser um grid-container, o segredo \u00e9 avaliar o que a complexidade dentro de cada elemento pede e qual vai ser a maneira menos custosa de chegar no layout definido.<\/div>\r\n<div><\/div>\r\n<div>\r\n<figure class=\"attachment attachment--preview\" data-trix-attachment=\"{&quot;contentType&quot;:&quot;image&quot;,&quot;height&quot;:669,&quot;url&quot;:&quot;https:\/\/lh3.googleusercontent.com\/JcmHmUbeG5fFvSMDKHEvq2HuOAp_TqvsnGr983xJSnB_SMyj9EI72pJUlj6gEl0lkEbjbE2DAqO_XNrUC7cIRBzCeYFjNYW1muRofLhgRnLmi-2_YsOV_OTkAMw_A8QzpNCRZw_2&quot;,&quot;width&quot;:1142}\" data-trix-content-type=\"image\" data-trix-attributes=\"{&quot;caption&quot;:&quot;CSS Grid e Flexbox&quot;}\"><img src=\"https:\/\/lh3.googleusercontent.com\/JcmHmUbeG5fFvSMDKHEvq2HuOAp_TqvsnGr983xJSnB_SMyj9EI72pJUlj6gEl0lkEbjbE2DAqO_XNrUC7cIRBzCeYFjNYW1muRofLhgRnLmi-2_YsOV_OTkAMw_A8QzpNCRZw_2\" width=\"1142\" height=\"669\" \/><figcaption class=\"attachment__caption attachment__caption--edited\">CSS Grid e Flexbox<\/figcaption><\/figure>\r\n<\/div>\r\n<div><\/div>\r\n<div>A diferen\u00e7a crucial entre flexbox e grid, al\u00e9m do primeiro ser unidimensional e o outro ser bi-dimensional, \u00e9 que o controle do layout no grid vem do container e no flexbox vem dos elementos. Como disse a Rachel Andrew, uma desenvolvedora especialista convidada do CSS Group e desenvolvedora do site Grid By Example em seu Ask Me Anything sobre<\/div>\r\n<div>CSS Grid:<\/div>\r\n<div><\/div>\r\n<blockquote>\"No geral, se eu tenho elementos que eu s\u00f3 quero que estejam igualmente espa\u00e7ados ou alinhados independente do tamanho deles, flexbox. Se eu quero criar um layout e colocar coisas nele, isso \u00e9 Grid.\"<\/blockquote>\r\n<div><\/div>\r\n<div>A Le Wagon prepara sua mente para o desenvolvimento das habilidades essenciais para alcan\u00e7ar o sucesso. Escolha sua cidade e <a href=\"https:\/\/www.lewagon.com\/pt-BR\/apply\">fa\u00e7a sua inscri\u00e7\u00e3o<\/a> em nosso curso de Desenvolvimento Web em <a href=\"https:\/\/www.lewagon.com\/pt-BR\/sao-paulo\">S\u00e3o Paulo<\/a>, <a href=\"https:\/\/www.lewagon.com\/pt-BR\/rio\">Rio<\/a> ou <a href=\"https:\/\/www.lewagon.com\/pt-BR\/online\">Online<\/a> e comece sua jornada de conhecimento.<\/div>","_contenu_de_larticle":"field_6412588b55814","titre_de_la_banniere":"","_titre_de_la_banniere":"field_6422eb732c237","paragraphe_de_la_banniere":"","_paragraphe_de_la_banniere":"field_6422ed834a968","intitule_du_bouton_de_la_banniere":"","_intitule_du_bouton_de_la_banniere":"field_6422ed934a969","lien_du_bouton_de_la_banniere":"","_lien_du_bouton_de_la_banniere":"field_6422eda54a96a","yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend | Le Wagon<\/title>\n<meta name=\"description\" content=\"As vezes \u00e9 bem dif\u00edcil decidir entre CSS Grid e Flexbox na hora de criar o seu layout, nesse artigo voc\u00ea vai entender as particularidades de cada tipo de layout e quais casos em que cada um deles \u00e9 mais adequado.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.lewagon.com\/pt-br\/skills\/css-grid-ou-flexbox\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend | Le Wagon\" \/>\n<meta property=\"og:description\" content=\"As vezes \u00e9 bem dif\u00edcil decidir entre CSS Grid e Flexbox na hora de criar o seu layout, nesse artigo voc\u00ea vai entender as particularidades de cada tipo de layout e quais casos em que cada um deles \u00e9 mais adequado.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.lewagon.com\/pt-br\/skills\/css-grid-ou-flexbox\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Le Wagon\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-27T22:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-01T17:13:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/swhyqzyqmd9u53pcj6razvkvych1.jpeg\" \/>\n<meta name=\"author\" content=\"MickaelT\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend | Le Wagon\" \/>\n<meta name=\"twitter:description\" content=\"As vezes \u00e9 bem dif\u00edcil decidir entre CSS Grid e Flexbox na hora de criar o seu layout, nesse artigo voc\u00ea vai entender as particularidades de cada tipo de layout e quais casos em que cada um deles \u00e9 mais adequado.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/swhyqzyqmd9u53pcj6razvkvych1.jpeg\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"MickaelT\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/css-grid-ou-flexbox\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/css-grid-ou-flexbox\\\/\"},\"author\":{\"name\":\"MickaelT\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#\\\/schema\\\/person\\\/8b4567040d8a3520451362bb71ea09e6\"},\"headline\":\"Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend\",\"datePublished\":\"2020-09-27T22:00:00+00:00\",\"dateModified\":\"2023-09-01T17:13:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/css-grid-ou-flexbox\\\/\"},\"wordCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/css-grid-ou-flexbox\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/swhyqzyqmd9u53pcj6razvkvych1.jpeg?fit=640%2C427&ssl=1\",\"keywords\":[\"Web\"],\"articleSection\":[\"Skills\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/css-grid-ou-flexbox\\\/\",\"url\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/css-grid-ou-flexbox\\\/\",\"name\":\"Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend | Le Wagon\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/css-grid-ou-flexbox\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/css-grid-ou-flexbox\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/swhyqzyqmd9u53pcj6razvkvych1.jpeg?fit=640%2C427&ssl=1\",\"datePublished\":\"2020-09-27T22:00:00+00:00\",\"dateModified\":\"2023-09-01T17:13:56+00:00\",\"description\":\"As vezes \u00e9 bem dif\u00edcil decidir entre CSS Grid e Flexbox na hora de criar o seu layout, nesse artigo voc\u00ea vai entender as particularidades de cada tipo de layout e quais casos em que cada um deles \u00e9 mais adequado.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/css-grid-ou-flexbox\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/css-grid-ou-flexbox\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/css-grid-ou-flexbox\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/swhyqzyqmd9u53pcj6razvkvych1.jpeg?fit=640%2C427&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/swhyqzyqmd9u53pcj6razvkvych1.jpeg?fit=640%2C427&ssl=1\",\"width\":640,\"height\":427},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/skills\\\/css-grid-ou-flexbox\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Skills\",\"item\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/.\\\/skills\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#website\",\"url\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/\",\"name\":\"Le Wagon\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#organization\",\"name\":\"Le Wagon\",\"url\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/logo.svg\",\"width\":172,\"height\":44,\"caption\":\"Le Wagon\"},\"image\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/#\\\/schema\\\/person\\\/8b4567040d8a3520451362bb71ea09e6\",\"name\":\"MickaelT\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g\",\"caption\":\"MickaelT\"},\"sameAs\":[\"http:\\\/\\\/blog.lewagon.com\"],\"url\":\"https:\\\/\\\/blog.lewagon.com\\\/pt-br\\\/author\\\/mickaelt\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend | Le Wagon","description":"As vezes \u00e9 bem dif\u00edcil decidir entre CSS Grid e Flexbox na hora de criar o seu layout, nesse artigo voc\u00ea vai entender as particularidades de cada tipo de layout e quais casos em que cada um deles \u00e9 mais adequado.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.lewagon.com\/pt-br\/skills\/css-grid-ou-flexbox\/","og_locale":"pt_BR","og_type":"article","og_title":"Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend | Le Wagon","og_description":"As vezes \u00e9 bem dif\u00edcil decidir entre CSS Grid e Flexbox na hora de criar o seu layout, nesse artigo voc\u00ea vai entender as particularidades de cada tipo de layout e quais casos em que cada um deles \u00e9 mais adequado.","og_url":"https:\/\/blog.lewagon.com\/pt-br\/skills\/css-grid-ou-flexbox\/","og_site_name":"Blog Le Wagon","article_published_time":"2020-09-27T22:00:00+00:00","article_modified_time":"2023-09-01T17:13:56+00:00","og_image":[{"url":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/swhyqzyqmd9u53pcj6razvkvych1.jpeg","type":"","width":"","height":""}],"author":"MickaelT","twitter_card":"summary_large_image","twitter_title":"Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend | Le Wagon","twitter_description":"As vezes \u00e9 bem dif\u00edcil decidir entre CSS Grid e Flexbox na hora de criar o seu layout, nesse artigo voc\u00ea vai entender as particularidades de cada tipo de layout e quais casos em que cada um deles \u00e9 mais adequado.","twitter_image":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/swhyqzyqmd9u53pcj6razvkvych1.jpeg","twitter_misc":{"Escrito por":"MickaelT"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/css-grid-ou-flexbox\/#article","isPartOf":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/css-grid-ou-flexbox\/"},"author":{"name":"MickaelT","@id":"https:\/\/blog.lewagon.com\/pt-br\/#\/schema\/person\/8b4567040d8a3520451362bb71ea09e6"},"headline":"Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend","datePublished":"2020-09-27T22:00:00+00:00","dateModified":"2023-09-01T17:13:56+00:00","mainEntityOfPage":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/css-grid-ou-flexbox\/"},"wordCount":11,"publisher":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/#organization"},"image":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/css-grid-ou-flexbox\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blog.lewagon.com\/wp-content\/uploads\/2023\/04\/swhyqzyqmd9u53pcj6razvkvych1.jpeg?fit=640%2C427&ssl=1","keywords":["Web"],"articleSection":["Skills"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/css-grid-ou-flexbox\/","url":"https:\/\/blog.lewagon.com\/pt-br\/skills\/css-grid-ou-flexbox\/","name":"Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend | Le Wagon","isPartOf":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/css-grid-ou-flexbox\/#primaryimage"},"image":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/css-grid-ou-flexbox\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blog.lewagon.com\/wp-content\/uploads\/2023\/04\/swhyqzyqmd9u53pcj6razvkvych1.jpeg?fit=640%2C427&ssl=1","datePublished":"2020-09-27T22:00:00+00:00","dateModified":"2023-09-01T17:13:56+00:00","description":"As vezes \u00e9 bem dif\u00edcil decidir entre CSS Grid e Flexbox na hora de criar o seu layout, nesse artigo voc\u00ea vai entender as particularidades de cada tipo de layout e quais casos em que cada um deles \u00e9 mais adequado.","breadcrumb":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/css-grid-ou-flexbox\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.lewagon.com\/pt-br\/skills\/css-grid-ou-flexbox\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/css-grid-ou-flexbox\/#primaryimage","url":"https:\/\/i0.wp.com\/blog.lewagon.com\/wp-content\/uploads\/2023\/04\/swhyqzyqmd9u53pcj6razvkvych1.jpeg?fit=640%2C427&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blog.lewagon.com\/wp-content\/uploads\/2023\/04\/swhyqzyqmd9u53pcj6razvkvych1.jpeg?fit=640%2C427&ssl=1","width":640,"height":427},{"@type":"BreadcrumbList","@id":"https:\/\/blog.lewagon.com\/pt-br\/skills\/css-grid-ou-flexbox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/blog.lewagon.com\/pt-br\/"},{"@type":"ListItem","position":2,"name":"Skills","item":"https:\/\/blog.lewagon.com\/pt-br\/.\/skills\/"},{"@type":"ListItem","position":3,"name":"Quando utilizar CSS Grid ou Flexbox? Dicas de um Desenvolvedor Frontend"}]},{"@type":"WebSite","@id":"https:\/\/blog.lewagon.com\/pt-br\/#website","url":"https:\/\/blog.lewagon.com\/pt-br\/","name":"Le Wagon","description":"","publisher":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.lewagon.com\/pt-br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/blog.lewagon.com\/pt-br\/#organization","name":"Le Wagon","url":"https:\/\/blog.lewagon.com\/pt-br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/blog.lewagon.com\/pt-br\/#\/schema\/logo\/image\/","url":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/02\/logo.svg","contentUrl":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/02\/logo.svg","width":172,"height":44,"caption":"Le Wagon"},"image":{"@id":"https:\/\/blog.lewagon.com\/pt-br\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/blog.lewagon.com\/pt-br\/#\/schema\/person\/8b4567040d8a3520451362bb71ea09e6","name":"MickaelT","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g","caption":"MickaelT"},"sameAs":["http:\/\/blog.lewagon.com"],"url":"https:\/\/blog.lewagon.com\/pt-br\/author\/mickaelt\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blog.lewagon.com\/wp-content\/uploads\/2023\/04\/swhyqzyqmd9u53pcj6razvkvych1.jpeg?fit=640%2C427&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/posts\/219925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/comments?post=219925"}],"version-history":[{"count":1,"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/posts\/219925\/revisions"}],"predecessor-version":[{"id":226458,"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/posts\/219925\/revisions\/226458"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/media\/219926"}],"wp:attachment":[{"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/media?parent=219925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/categories?post=219925"},{"taxonomy":"type_de_post","embeddable":true,"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/type_de_post?post=219925"},{"taxonomy":"post-format","embeddable":true,"href":"https:\/\/blog.lewagon.com\/pt-br\/wp-json\/wp\/v2\/post-format?post=219925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}