How to make 2/3 width column in Gutenberg

You can add a 2 column block layout where 1 block takes up 2 thirds in the block editor using the UI. Adding CSS classes to achieve this is highly unusual and unnecessary

When you add a column block it asks you:

enter image description here

Resulting in column blocks spaced for thirds:

enter image description here

Each block has a percentage width in the block settings:

enter image description here

If you wanted to use the CSS classes from your theme you have several options:

  • Build a custom columns block
  • Add CSS classes to the column blocks, completely override or remove the block CSS and add in your own

It appears you tried to do the latter, and ran into a 100% pure CSS issue, CSS questions are best asked on stackoverflow (they’re offtopic on WPSE as they aren’t WordPress questions)

Related Posts:

  1. Why is the new Gutenberg editor so narrow, and how to make it wider?
  2. Is it possible to create column width presets in Gutenberg?
  3. Create a trailing block with programatically generated Gutenberg columns
  4. How to get blocks with same heigh in columns?
  5. Deactivate Gutenberg tips forever – not Gutenberg
  6. How do I register multiple blocks with block.json and register_block_type_from_metadata?
  7. Disable Gutenberg text-Settings in all blocks
  8. gutenberg block – how to force update after attribute changed?
  9. How can I add a custom attribute to Gutenberg core blocks?
  10. Add additional classes to gutenberg .editor-styles-wrapper
  11. How to use the WordPress < LinkControl /> Component
  12. Remove border radius setting from the Gutenberg button block?
  13. Add PHP block template to content using wp_insert_post
  14. Gutenberg reusable blocks – is it possible to customise an instance?
  15. Dynamic gutenberg block with react instead of php
  16. File structure and react setup when creating multiple Gutenberg blocks
  17. Gutenberg block get categories in SelectControl
  18. How to access “default” property of attribute in Gutenberg
  19. Gutenberg Block manipulation: Undo parse_blocks() with serialize_blocks() results in unicode issues
  20. How to use “getEntityRecords” for user data?
  21. Gutenberg: Restrict Top Level Blocks, But Not Child Blocks
  22. Gutenberg default initial values for FocalPointPicker
  23. Pre-set CSS class into custom block/template
  24. How to check whether Gutenberg editor is installed or not [duplicate]
  25. How to align a single Gutenberg block button in WP 5.5.3?
  26. Is it possible to print the output of a Gunteberg block with no classes?
  27. How can you reset InnerBlock content to base template?
  28. How can we mimic the columns block in Gutenberg to instead be a list?
  29. How to set Gutenberg preferences programmatically with wp.data.dispatch?
  30. Dynamic Gutenburg block output echoes in WP Dashboard
  31. Are gutenberg blocks ideally supposed to look the same in both back-end and front-end?
  32. How to output child block attributes on a parent block
  33. Is there a better way to to make async API calls using the @wordpress/data module?
  34. How can I center Gutenberg buttons on mobile?
  35. Extend the “core/link” Block Format
  36. Passing settings from Reusable Block to it’s children
  37. Gutenberg element: How to usw Rangecontrol with two values to imitate a rangeslider?
  38. Deprecated for blocks.getSaveElement
  39. WordPress filter post content with PHP before editing it in Gutenberg
  40. Pass PHP vars to gutenberg sidebar
  41. Suggested image dimensions Gutenberg Hook
  42. How Add New Button to Gutenberg Editing Toolbar
  43. How to force gutenberg to reload blocks after saving
  44. How can I programaticly open Gutenberg
  45. Update a block template and apply those changes to an existing post/page
  46. Custom block save does not match due to stripped slashes from br tag and added figure tag around images
  47. How to disable align-wide for specified blocks in Gutenberg
  48. Deprecated function not working in Gutenberg
  49. Gutenberg Block checkbox check-unckeck does not work
  50. WordPress npm run build and start only outputs wp-scripts start but does nothing
  51. Gutenberg get index of gutenberg innerblock
  52. Custom Endpoint API based on attribute gutenberg block
  53. Gutenberg : how can I get the title of the current block within its ‘edit’ function?
  54. how can default_content filter tell if content will load in block editor or classic editor?
  55. Gutenberg programmatically move block to position
  56. Gutenberg somehow not loading in WP 5
  57. Gutenberg block – remove setting for core/file
  58. Gutenberg JavaScript error
  59. Gutenberg selecting child blocks directly from appender
  60. Image not aligning with text
  61. Custom validation on publish/ update in Block Editor
  62. WordPress Gutenberg – Open the “Block Pattern Explorer” programmatically
  63. Modify src attribute on image block
  64. Two text color palettes are appearing in Gutenberg
  65. Gutenberg button removed on save if its empty
  66. Gutenberg build error: You may need an appropriate loader to handle this file type SCSS
  67. Gutenberg: How to constrict floated table blocks to 1000px width in the front-end, when align wide & full are being used?
  68. Quasy – modal component does not hide itself
  69. Table block – Wrap table
  70. ResizableBox component is not selectable in block editor
  71. Whitelist a single SVG for use in post_content
  72. Gutenberg block previews suddenly not working
  73. WordPress Gutenberg Signal on Block Alignment Change
  74. When to use block patterns over nested blocks?
  75. How to convert block to a list block in WordPress gutenberg editor?
  76. How to do store, retrieve and write attributes in the registerFormatType method in Guttenberg?
  77. How can I create more advanced layouts in Gutenberg block editor?
  78. how to disable a button added by a plugin in gutenberg toolbar?
  79. Images are not shown in the post editor
  80. Updating failed message when a wp_insert_post function is hooked to save_post hook
  81. Images at the same vertical position in multiple columns
  82. Get post ancestors in the Block Editor
  83. How to disable blocks in Gutenberg editor for specific post type
  84. Possible to make the link autocompleter prioritize Tags before Posts?
  85. Prevent FormTokenField component to accept random entries
  86. How to move the customizations done in the Editor to my child theme?
  87. Unable to see the attributes for the custom block created
  88. How to register multiple blocks
  89. How to edit post meta by post ID in Gutenberg
  90. How do I change bullet on categories block?
  91. Add a class to img of core/cover block
  92. Hide title block on edit screen in Gutenberg
  93. How can I disable fontSizes of the Paragraph block inside the Quote block with theme.json?
  94. Categories, tags and thumbnails panels are not visible in the Block editor’s post menu
  95. How to translate multiple blocks within one plugin
  96. Error with RichText Component
  97. Rem font size is different in the frontend and block editor
  98. Add to Media Inserter Categories
  99. Get attributes from last block created
  100. How do I make the block editor use https by default?